怎么实现鼠标移动页面的图片也跟着往不同的方向移动

小柚砸 2017-11-27 04:03:05

http://hs.blizzard.cn/home/
怎么能做到像炉石传说的那样鼠

标移动，里面的图片也跟着移动呢？有相关的代码吗。

...全文

563 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

小柚砸 2017-11-28

打赏
举报

实际用这段代码会有点卡顿，就是反应没有那么灵敏~要怎么解决呢？

weixin_51751575 2021-07-27

@小柚砸用gsap 改变位移的值

天际的海浪 2017-11-28

打赏
举报

引用 2 楼 qq_41192057 的回复:

实际用这段代码会有点卡顿，就是反应没有那么灵敏~要怎么解决呢？

要灵敏，把 transition: transform 500ms;去掉，或者把执行时间改小

天际的海浪 2017-11-28

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
html,body {
	height: 100%;
	margin: 0;
}
#d {
	position: absolute;
	left: 200px;
	top: 200px;
	width: 100px;
	height: 100px;
	background-color: #f99;
	transform: translate(0px,0px);
	transition: transform 500ms;
}

</style>
</head>
<body>
<div id="d"></div>
<script type="text/javascript">
document.onmousemove = function (e) {
	e = e||window.event;
	var x = 0.5-e.clientX/document.body.offsetWidth;
	var y = 0.5-e.clientY/document.body.offsetHeight;
	document.getElementById("d").style.transform = "translate("+x*100+"px,"+y*100+"px)";
};
</script>
</body>
</html>