• 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>
  • 相关阅读:
    ES6--Promise讲解
    JavaScript原型链以及Object,Function之间的关系
    webpack中利用require.ensure()实现按需加载
    js中cssText批量修改元素样式
    js判断数组中是否有重复元素
    vue生命周期小总结
    学习vue生命周期
    [异步请求]ajax、axios、fetch之间的详细区别以及优缺点
    [Es6]原生Promise的使用方法
    [javascript]原生js实现Ajax
  • 原文地址:https://www.cnblogs.com/fleshy/p/4124863.html
Copyright © 2020-2023  润新知