首页 > 代码库 > Day7-----mouseTail
Day7-----mouseTail
//---------使用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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。