zoukankan      html  css  js  c++  java
  • JS 拖动原理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>拖动层效果</title>
    </head>
    
    <body>
    <div id="tf" style="position:absolute; 200px; height:150px; background-color:#ccc; top:300px;
       left:300px; z-index:101; border:solid 1px blue;">
        
        <div id="title" style="background-color:blue; cursor:move; height:20px; color:#fff; font-size:13px; padding-top: 5px; padding-left:10px;">
            拖动层TF...
        </div>
        
    </div>
    
    
    
    <script type="text/javascript">
        tf=document.getElementById("tf"); //获取得tf对象
        var posX; //记录 X
        var posY;// 记录 Y 
        //onmousedown 表示鼠标在按下时发生,记录当前位置
        tf.onmousedown=function(e)
        {
            if(!e)
              e=window.event;
              posX=e.clientX-parseInt(tf.style.left); //自已本身位
              posY=e.clientY-parseInt(tf.style.top);//自已本身位
              
              tf.onmousemove=function(ev)
                {
                    if(ev==null)
                     ev=window.event;
                     tf.style.left = (ev.clientX - posX) + "px";
                     tf.style.top = (ev.clientY - posY) + "px";
                }
        }
        
        
        tf.onmouseup=function()
        {  
          //onmouseup 事件会在鼠标按键被松开时发生。
          tf.onmousemove=null;
        }
    </script>
    </body>
    </html>
    View Code

    拖动层效果

    拖动层TF...
  • 相关阅读:
    [SDOI2016]排列计数
    Broken robot
    环路运输
    naptime
    Accumulation Degree
    选课
    没有上司的舞会
    金字塔
    Polygon
    石子合并
  • 原文地址:https://www.cnblogs.com/yzenet/p/3333075.html
Copyright © 2011-2022 走看看