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

最新推荐文章于 2023-06-20 11:30:05 发布

weixin_30897233

最新推荐文章于 2023-06-20 11:30:05 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/karila/p/7103250.html

版权

<!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.οnmοusemοve=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>

转载于:https://www.cnblogs.com/karila/p/7103250.html

weixin_30897233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一组div跟随鼠标移动，反应鼠标轨迹

<!DOCTYPE html><html><head> <title>div随鼠标移动</title> <style type="text/css"> .ins{ background:green; width:10px; height:10px; position:a...
复制链接

扫一扫