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>
以上就是本文的全部内容，希望对大家的学习有所帮助。