一组div跟随鼠标移动，反应鼠标轨迹

Posted karila

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一组div跟随鼠标移动，反应鼠标轨迹相关的知识，希望对你有一定的参考价值。

<!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跟随鼠标移动，反应鼠标轨迹的主要内容，如果未能解决你的问题，请参考以下文章

JS笔记 div跟随鼠标移动案列

JS实现跟随鼠标移动的div，和一串跟随鼠标的div，鼠标移入移出实现图片的颜色淡入淡出

用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做

跟随鼠标移动的div

在div+css中，如何实现图片跟随鼠标任意移动

关于MATLAB收集人工鼠标移动轨迹的坐标