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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦