javascript 鼠标跟随特效代码及理解
标签：
JavaScript
javascript 鼠标跟随特效 <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| height: 1000px; | |
| } | |
| div{ | |
| width: 50px; | |
| height: 50px; | |
| background: red; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| text-align: center; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| line-height: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <script> | |
| var oDiv=document.getElementsByTagName('div'); | |
| document.onmousemove=function(e){ | |
| //e等于鼠标对象 | |
| e=e || window.event; | |
| var maxX=window.innerWidth-oDiv[0].offsetWidth-18; | |
| var maxY=window.innerHeight-oDiv[0].offsetHeight-18; //浏览器的宽度 - 第0个盒子 - 滚动条的宽度 | |
| var sjyr=Math.floor(Math.random()*255); | |
| var sjyg=Math.floor(Math.random()*255); | |
| var sjyb=Math.floor(Math.random()*255); | |
| var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; | |
| if(e.clientX>maxX){ | |
| oDiv[0].style.left=maxX+'px'; | |
| }else{ | |
| oDiv[0].style.left= e.clientX+'px'; | |
| } | |
| if(e.clientY>maxY){ | |
| oDiv[0].style.top=maxY+'px'; | |
| }else{ | |
| oDiv[0].style.top= e.clientY+scrollTop+'px'; | |
| } | |
| for(var i=oDiv.length-1;i>0;i--){ //for循环让div跟随他的上一个 | |
| oDiv[i].style.left = oDiv[i-1].style.left; | |
| oDiv[i].style.top = oDiv[i-1].style.top; | |
| oDiv[i].style['backgroundColor'] = oDiv[i-1].style['backgroundColor']; | |
| }//后者跟随前面的一个DIV | |
| //滚动条滚动的距离; | |
| oDiv[0].style.backgroundColor='rgb('+sjyr+","+sjyg+","+sjyb+')'; | |
| /* oDiv[0].style.left= e.clientX+'px'; | |
| oDiv[0].style.top= e.clientY+scrollTop+'px';*/ | |
| //e.clientX 鼠标 X 距浏览器边缘多少像素 | |
| //e.clientY 鼠标 Y 距浏览器边缘多少像素 | |
| } | |
| </script> | |
| </body> | |
</html> 下面有图片： |
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦