zoukankan      html  css  js  c++  java
  • 多个小方块的运动

    一个div跟着一个div运动,第一个div跟着鼠标运动,就可以有一串div跟着鼠标运动起来

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    div{10px; height:10px; background:#F00; position:absolute;}
    </style>
    <script>
    function getPos(ev)
    {
    	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    	return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
    }
    document.onmousemove=function(ev)
    {
    	var aDiv=document.getElementsByTagName('div');
    	var aEvent=ev||event;
    	for(var i=aDiv.length-1;i>0;i--){
    		aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';//后一个跟着前一个div移动
    		aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    	}
    	var pos=getPos(aEvent);
    	aDiv[0].style.left=pos.x+'px';
    	aDiv[0].style.top=pos.y+'px';
    }
    </script>
    </head>
    
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <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>
    
  • 相关阅读:
    关于SVN更新慢的解决方法
    用PS做法线,高光贴图的最简图文教程
    3dmax教程 人物+骨骼+蒙皮+动画教程
    django 模板视图,表单视图,各种视图
    django settings最佳配置
    groovy 弹出菜单
    python construct文档
    用powershell实现自动化操作
    如何用chrome扩展将网页变成黑底白字,用以保护视力
    打造基于CentOS7的xfce最简工作环境
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4542732.html
Copyright © 2011-2022 走看看