鼠标跟随
定时器：为了测试图片延迟显示，更好看，会一直动 效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
position: absolute;
left: -10000px;
top: 0;
background: #03ccbb;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 50%;
transition: all 0.1s linear;
}
img{
width: 40px;
height: 40px;
border-radius: 50%;
}
html{
/*鼠标隐藏*/
/*cursor: none;*/
}
</style>
</head>
<body>
<span><img src="img/1.png" alt=""></span>
<span><img src="img/2.png" alt=""></span>
<span><img src="img/3.png" alt=""></span>
<span><img src="img/4.png" alt=""></span>
<span><img src="img/5.png" alt=""></span>
<span><img src="img/6.png" alt=""></span>
<span><img src="img/7.png" alt=""></span>
<span><img src="img/8.png" alt=""></span>
<script>
var spans = document.getElementsByTagName("span");
document.onmousemove = function(e){
e=e||window.event;
//定时器，测试图片延迟显示，更好看，会一直动
// setInterval(function(){
// for(var i=spans.length-1;i>=0;i--){
// if(i!=0){
// spans[i].style.left = spans[i-1].offsetleft+82+"px";
// spans[i].style.top = spans[i-1].offsettop+"px";
// }else{
// spans[i].style.left=e.clientX+"px";
// spans[i].style.top=e.clientY+"px";
// }
// }
// },1000)
for(var i=spans.length-1;i>=0;i--){
if(i!=0){
spans[i].style.left = spans[i-1].offsetLeft+82+"px";
spans[i].style.top = spans[i-1].offsetTop+"px";
}else{
spans[i].style.left=e.clientX+"px";
spans[i].style.top=e.clientY+"px";
}
}
}
</script>
</body>
</html>
相关阅读
支付宝的创始人是马云，在2003年淘宝网首次推出支付宝，支付宝作为第三支付平台，为消费者提供安全，简单，快速的支付解决方案，维护了消费者
Axure教程：手把手教你做截获鼠标指针（或鼠标变手型跟随）
昨天突发感想，教大家做了个Axure导航栏或广告悬停的效果。今天我又心血来潮了，再教你们一个很实用的 应用场景：截获鼠标指针，做鼠标
在平时开发中，实现鼠标跟随效果并不是很常见，但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果