您的位置：首页 > Web前端 > JavaScript

JavaScript原生代码实现鼠标跟随案例（附注释）

2018-01-24 16:41 543 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标跟随案例</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 5000px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #aaaaaa;
border-radius: 7px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
<script>

window.onload =function () {
//获取相关元素
var box = document.getElementsByClassName("box")[0];
var timer = null;
// animate(box,y);
var tarx = 0;var tary = 0;
var leaderx = 0; var leadery = 0;
document.onmousemove = function (event) {
//兼容低版本IE的事件对象写法
event = event||window.event;
var x = event.pageX||scroll().left+event.clientX;
var y = event.pageY||scroll().top+event.clientY;

//让鼠标在box中心
tarx = x-25; tary = y-25;

//使用定时器之前，清除定时器，以免出现bug
clearInterval(timer);

//开启定时器
timer = setInterval(function () {

//x方向的动画处理部分
leaderx = box.offsetLeft;
var speedx = (tarx-leaderx)/10;
speedx = speedx>0?Math.ceil(speedx):Math.floor(speedx);
leaderx = leaderx+speedx;
box.style.left = leaderx+"px";

//y方向的动画处理部分
leadery = box.offsetTop;
var speedy = (tary-leadery)/10;
speedy = speedy>0?Math.ceil(speedy):Math.floor(speedy);
leadery = leadery+speedy;
box.style.top = leadery+"px";

//判断是否需要清除定时器  注意：此处不清除定时器会有bug，效果可自行注释掉；
if(Math.abs(tarx-box.offsetLeft)<=Math.abs(speedx)&&Math.abs(tary-box.offsetTop)<=Math.abs(speedy)){
box.style.left = tarx+"px";
box.style.top = tary+"px";
clearInterval(timer);
}

},15);
}

//scroll兼容性封装
function scroll() {
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}

}
</script>
</head>
<body>
<div class="box">1</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航