<!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 type="text/css"> *{ padding:0px; margin:0px; list-style:none;} body{ height:1000px;} #ul1 li{ position:absolute; 30px; height:30px; text-align:center; line-height:30px; border:1px solid red;} </style> <script type="text/javascript"> window.onload=function() { setInterval(function(){ var oUl=document.getElementById('ul1'); var oLi=oUl.getElementsByTagName('li'); var i=0; for(i=oLi.length-1;i>0;i--) { oLi[i].style.left=oLi[i-1].offsetLeft+35+"px"; oLi[i].style.top=oLi[i-1].style.top; }},30); }; document.onmousemove=function(ev) { var oEvent=ev||event; var oUl=document.getElementById('ul1'); var oLi=oUl.getElementsByTagName('li'); var i=0; for(i=oLi.length-1;i>0;i--) { oLi[i].style.left=oLi[i-1].offsetLeft+35+"px"; oLi[i].style.top=oLi[i-1].offsetTop+"px"; //oLi[i].style.marginLeft="10px;"; }; oLi[0].style.left=getEventX(oEvent)+"px"; oLi[0].style.top=getEventY(oEvent)+"px"; } function getEventY(oEvent) { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; return oEvent.clientY+scrollTop; } function getEventX(oEvent) { var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return oEvent.clientX+scrollLeft; }; </script> </head>
<body> <h3>web前端开发交流群</h3> <p>149044724</p> <ul id="ul1"> <li>1</li> <li>8</li> <li>7</li> <li>0</li> <li>1</li> <li>4</li> <li>6</li> <li>1</li> <li>4</li> <li>8</li> <li>3</li> </ul> </body> </html>