当前位置:主页 > 网站优化 >

跟随鼠标移动

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-16 10:49 阅读量:
<!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>
本文链接地址:http://www.seohuizhou.com/webyouhua/1476.html
上一篇:<<64G 最新 Python 就业班 视频教程
下一篇:2018年你需要知道的11个JavaScript库>>