zoukankan      html  css  js  c++  java

  • js拖动原理

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>js拖动div修正版</title>     
    <script type="text/javascript"> 
    var _move = false; 
    var _x,_y; 
    window.onload=function(event){ 
       document.getElementById('layer').onmousedown=function(event){ 
       event = event ? event : window.event; 
    //判断浏览器类型（针对ie）
       var which = navigator.userAgent.indexOf('MSIE') > 1 ? (event.button == 1 ? 1 : 0) : (event.which == 1 ? 1 : 0) ; 
       if(which) { 
         _move = true; 
         _x = event.clientX - parseInt(document.getElementById('layer').style.left);   
        _y = event.clientY - parseInt(document.getElementById('layer').style.top);  
        }  
      } 
    }   

      

    document.onmousemove=function(event){ 
      event = event ? event : window.event; 
         if(_move) { 
             var x = event.clientX - _x; 
             var y = event.clientY - _y; 
             document.getElementById('layer').style.left = x+'px'; 
             document.getElementById('layer').style.top = y+'px'; 
         } 
    }    


    document.onmouseup=function(){ _move = false; } 
    </script>    
    </head>     
    <body> 
    <div id="layer" style="position:absolute; 200px; height:200px; background-color:#3333FF; left:425px; top:134px"></div> 
    </body> 
    </html>
  • 相关阅读:
    爬虫入门（五）
    爬虫入门（四）
    爬虫入门（三）
    爬虫入门（二）
    爬虫入门（一）
    openpyxl的简单使用
    ansible（三）
    ansible（二）
    ansible（一）
    CF Global Round 10-F
  • 原文地址：https://www.cnblogs.com/lidabo/p/2455555.html
Copyright © 2011-2022 走看看