首页 > 代码库 > Day7-----mouseTail

Day7-----mouseTail

2024-08-04 15:57:19   218人阅读

 //---------使用onmousedown/onmouseup/onmousemove事件分别给以不同的行为完成“当鼠标按下时移动有尾巴，抬起消失”的兼容性功能
 //--尚未解决的问题------只是一种伪消失，并不是真正的取消onmousemove的行为，应当使用onmousemove=null;来解决，但是出现问题了
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>mouseTail</title> 6 </head> 7 <style type="text/css"> 8     div{width: 10px;height: 10px;position: absolute;background: red;display: none;cursor: pointer;} 9 </style>10 <script type="text/javascript">11 window.onload=function(){12     var i=0;13     oDiv=document.getElementsByTagName(‘div‘);14     var oEvent;15     for(i=0;i<5;i++){16         document.body.innerHTML+=document.body.innerHTML;17     }18 19     function mouseTail(ev){    20         oEvent=ev||event;        21         for(i=0;i<oDiv.length-1;i++){            22             oDiv[i].style.left=oDiv[i+1].offsetLeft+‘px‘;23             oDiv[i].style.top=oDiv[i+1].offsetTop+‘px‘;24         }25         oDiv[oDiv.length-1].style.left=oEvent.clientX+‘px‘;26         oDiv[oDiv.length-1].style.top=oEvent.clientY+‘px‘;27     }28 29     document.onmousedown=function(ev){30         oEvent=ev||event;31         for(i=0;i<oDiv.length;i++){32             oDiv[i].style.left=oEvent.clientX+‘px‘;33             oDiv[i].style.top=oEvent.clientY+‘px‘;34             oDiv[i].style.display=‘block‘;35         }36         document.onmousemove=mouseTail;37     }38     document.onmouseup=function(){39         40         for(i=0;i<oDiv.length;i++)    oDiv[i].style.display=‘none‘;41     }    42 }43 </script>44 <body>45     <div></div>46 </body>47 </html>

 

Day7-----mouseTail


联系
我们