• 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{ 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>
  • 相关阅读:
    Java:多线程
    javascript:正则表达式、一个表单验证的例子
    DOM对象和window对象
    javascript:面向对象和常见内置对象及操作
    如何检查CentOS服务器受到DDOS攻击
    CentOS防SYN攻击
    CentOS服务器简单判断CC攻击的命令
    在VMware中为CentOS配置静态ip并可访问网络
    安全运维之:网络实时流量监测工具iftop
    安全运维之:网络实时流量监测工具iftop
  • 原文地址:https://www.cnblogs.com/fleshy/p/4124863.html
Copyright © 2020-2023  润新知