一組div跟隨鼠標移動，反應鼠標軌跡
阿新 • • 發佈：2017-07-01
cnblogs urn classname 元素 elements brush end ava dex
<!DOCTYPE html>
<html>
<head>
<title>div隨鼠標移動</title>
<style type="text/css">
.ins{
background:green;
width:10px;
height:10px;
position:absolute;
border-radius:10px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script type="text/javascript">
function getElementByClassName(classnames){
var objArray= new Array();//定義返回對象數組
var tags=document.getElementsByTagName("*");//獲取頁面所有元素
var index = 0;
for(var i in tags){
if(tags[i].nodeType==1){
if(tags[i].getAttribute("class") == classnames){ //如果某元素的class值為所需要
objArray[index]=tags[i];
index++;
}
}
}
return objArray;
}
for(var i=0;i<50;i++){
var div=document.createElement("div");
div.setAttribute("class","ins");
var container=getElementByClassName("container");
container[0].append(div);
}
divs=getElementByClassName("ins");
console.log(divs.length);
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.left=oEvent.clientX+"px";
divs[0].style.top=oEvent.clientY+"px";
}
</script>
</html>
一組div跟隨鼠標移動，反應鼠標軌跡