javascript DIV实现跟随鼠标移动
本文实例为大家分享了javascriptDIV实现跟随鼠标移动的具体代码,供大家参考,具体内容如下
首先介绍的是一个div跟随鼠标移动的效果,具体代码如下
javascriptdiv跟随鼠标移动
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <scripttype="text/javascript"> window.onload=function(){ vardiv1=document.getElementById('div1'); document.onmousemove=function(ev){ //IE支持event,firefox不支持 varoEvent=ev||event; // varscrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; div1.style.top=oEvent.clientY+scrollTop+'px';//Y div1.style.left=oEvent.clientX+scrollLeft+'px';//X }; }; </script> </head> <body> <divid="div1"style="width:10px;height:10px;background-color:blue;position:absolute;"></div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </body> </html>
现在为大家分享的是javascript一串DIV跟随鼠标移动
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title></title> <styletype="text/css"> div{ width:2px; height:2px; background-color:red; position:absolute; } </style> <scripttype="text/javascript"> window.onload=function(){ varoDivs=document.getElementsByTagName('div'); document.onmousemove=function(ev){ varoEvent=ev||event; document.getElementsByTagName('span')[0].innerHTML=oEvent.clientY+'|'+oEvent.clientX; for(vari=oDivs.length-1;i>0;i--){ oDivs[i].style.top=oDivs[i-1].style.top; oDivs[i].style.left=oDivs[i-1].style.left; } oDivs[0].style.top=oEvent.clientY+'px'; oDivs[0].style.left=oEvent.clientX+'px'; }; }; </script> </head> <body> <span></span> <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> <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> <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> <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> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助。