鼠标跟随
在平时开发中，实现鼠标跟随效果并不是很常见，但是在一些个人博客和个人网站中这个效果有时候会用到
有些游戏网站中也会用到这个效果。这里分享的是一个例子。代码如下，，
注意我这里跟随的是一个图片，也可以根据需要把图片改成自己需要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="001.jpg" alt="" width="50" height="50" id="pic"/>
<script>
var timer = null;
var pic = document.getelementbyid("pic");
//在页面上 点击的时候 获取鼠标在页面上的位置 让图片 慢慢 到这个位置
document.onmousemove = function (event) {
var event = event || window.event;
//获取鼠标在页面上的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//让图片 慢慢 到这个位置
timer = setInterval(function () {
//step = (target - leader) / 10
//leader = leader + step
var targetX = pageX - pic.offsetwidth / 2;//水平方向的目标
var targetY = pageY - pic.offsetheight / 2;//
var leaderX = pic.offsetleft;//水平方向的当前位置
var leaderY = pic.offsettop;//
var stepX = (targetX - leaderX) / 10;
var stepY = (targetY - leaderY) / 10;
stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
leaderX = leaderX + stepX;
leaderY = leaderY + stepY;
pic.style.left = leaderX + "px";//单位一定不要忘记
pic.style.top = leaderY + "px";//单位一定不要忘记
if (leaderX === targetX && leaderY === targetY) {
clearInterval(timer);
}
}, 1);
};
</script>
</body>
</html>
相关阅读
如何提升网站的整体效果。做任何事情我们都注重效率，于是会去寻找各种捷径，但是许多时候通往成功的路上是没有捷径的，唯有脚踏实地认
现在“互联网+”时代已到到来，网站建设将会迎来什么样的改变呢?在这个大环境下，墨守成规是会被淘汰的，只有改变、创新才能迎来新的
一、打开注册表 首先打开windows的注册表，当然了，我个人倾向于 （1）使用windows键+R，打开运行框 （2）输入regedit 然后敲击回车，进入注册表
日前和几个 BD 朋友聊天，听到说“现在很多渠道投放的效果犹如雾里看花，点击很多，激活很少，留存更是骨感……”想到自己对当下的统计后
一、广告效果监测出现的原因对于广告投放效果进行监测和预估成为各类广告主的共同需求：广告主对广告优化的需求，广告主需要通过曝光