跟随鼠标的div
跟随鼠标的div
一个跟随鼠标的div：
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随鼠标的div</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
<script>
document.onmousemove=function(ev){
var oEVent=ev||event;
var oDiv=document.getElementById("div1");
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
oDiv.style.top=oEVent.clientY+scrolltop+"px";
oDiv.style.left=oEVent.clientX+scrollLeft+"px";
}
</script>
</head>
<body style="height: 2000px">
<div id="div1">
</div>
</body>
一串跟随鼠标的div：
将定位做成绝对定位，后面一个diiv永远跟着前面一个走。
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随鼠标的div</title>
<style type="text/css">
div{
width:10px;
height:10px;
background-color:red;
position: absolute;
}
</style>
<script>
var divs=document.getElementsByTagName("div");
document.onmousemove=function(ev){
var oEVent=ev||event;
for(var i=divs.length-1;i>0;i--){
divs[i].style.left= divs[i-1].style.left;
divs[i].style.top= divs[i-1].style.top;
}
divs[0].style.top=oEVent.clientY+"px";
divs[0].style.left=oEVent.clientX+"px";
}
</script>
</head>
<body style="height: 2000px">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<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>
浙公网安备 33010602011771号