zoukankan      html  css  js  c++  java
  • 鼠标拖拽效果

     1     <div id="div3">
     2     </div>
     3     <script type="text/javascript">
     4         
     5             
     6         div3.onmousedown= function(e){
     7             var arr =[];
     8             arr[0] =[div3.offsetLeft,div3.offsetTop];//记录第一次点击的值;
     9             var x = e.offsetX;//获取元素鼠标点击坐标
    10             var y = e.offsetY;//获取元素鼠标点击坐标
    11             document.onmousemove = function(e){
    12                 div3.style.left=e.clientX -x+"px";//left值
    13                 div3.style.top=e.clientY -y+"px";//top值
    14                 var m =div3.style.left;
    15                 var n =div3.style.top;
    16                 var arr1=[m,n];            
    17                 arr.push(arr1);
    18             }
    19             // console.log(arr);
    20             document.onmouseup= function(){
    21                 document.onmousemove=null;
    22                 document.onmouseup=null;
    23                 var len=arr.length;
    24                 function fh(){
    25                     len--;
    26                     if(len<0){
    27                         clearInterval(t);    
    28                     }else{
    29                         div3.style.left=arr[len][0];
    30                         div3.style.top =arr[len][1];
    31                         }
    32                 }
    33                 var t=setInterval(fh,10);
    34             }
    35          }        
    36                 
    37     </script>
  • 相关阅读:
    模板方法设计模式
    单一职责原则
    开闭原则
    uml
    迭代器模式
    观察者模式
    工厂模式
    代理模式
    idea本地Maven仓库不能下载依赖jar包的解决方案
    selenium 使用教程详解-java版本
  • 原文地址:https://www.cnblogs.com/l8l8/p/8794872.html
Copyright © 2011-2022 走看看