美女视频脱光131,打屁股调教美女视频

實(shí)現(xiàn)拖拽的基本思路

　　拖拽的基本原理就是根據(jù)鼠標(biāo)的移動來移動被拖拽的元素。鼠標(biāo)的移動也就是x、y坐標(biāo)的變化;元素的移動就是style.position的top和left的改變。當(dāng)然，并不是任何時候移動鼠標(biāo)都要造成元素的移動，而應(yīng)該判斷鼠標(biāo)左鍵的狀態(tài)是否為按下狀態(tài)，是否是在可拖拽的元素上按下的。

　　根據(jù)以上的基本原理，我寫出了下面的基本思路。感覺代碼還是比較短的，

拖拽狀態(tài) = 0鼠標(biāo)在元素上按下的時候{   
    拖拽狀態(tài) = 1   
    記錄下鼠標(biāo)的x和y坐標(biāo)   
    記錄下元素的x和y坐標(biāo)   
   }   
   鼠標(biāo)在元素上移動的時候{   
    如果拖拽狀態(tài)是0就什么也不做。   
    如果拖拽狀態(tài)是1，那么   
    元素y = 現(xiàn)在鼠標(biāo)y - 原來鼠標(biāo)y + 原來元素y   
    元素x = 現(xiàn)在鼠標(biāo)x - 原來鼠標(biāo)x + 原來元素x   
   }   
   鼠標(biāo)在任何時候放開的時候{   
    拖拽狀態(tài) = 0   
   }

　　將以上思路翻譯成JS代碼就可以實(shí)現(xiàn)拖拽的效果了。

　　JavaScript代碼

<mce:script type="text/javascript"><!--   
   var dragging = false;   
   var test;   
   var mouseY;   
   var mouseX;   
   window.onload = function(){   
    test = document.getElementById("test");   
    test.onmousedown = down;   
    test.onmousemove = move;   
    document.onmouseup = up;   
    test.style.position = "relative";   
    test.style.top = "0px";   
    test.style.left = "0px";   
   }   
   function down(event)   
   {   
    eventevent = event || window.event;    
    dragging = true;    
    mouseX = parseInt(event.clientX);   
    mouseY = parseInt(event.clientY);   
    objY = parseInt(test.style.top);   
    objX = parseInt(test.style.left);   
   }   
   function move(event){   
    eventevent = event || window.event;    
    if(dragging == true){   
        var x,y;   
        y = event.clientY - mouseY + objY;   
        x = event.clientX - mouseX + objX;   
        test.style.top = y + "px";   
        test.style.left = x + "px";   
    }   
   }   
   function up(){   
    dragging = false;   
   }   
   // --></mce:script>

　　 HTML代碼

<div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">   
     <p>我是拖拽示例DIV。</p>   
     <p>可以試驗(yàn)一下效果。</p>   
   </div>

演示代碼

<!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=utf-8" />    
     <title>JavaScript拖拽示例網(wǎng)頁</title>    
     <mce:script type="text/javascript"><!--     
     var dragging = false;   
     var test;   
     var mouseY;   
     var mouseX;   
     window.onload = function(){   
        test = document.getElementById("test");   
        test.onmousedown = down;   
        test.onmousemove = move;   
        document.onmouseup = up;   
        test.style.position = "relative";   
        test.style.top = "0px";   
        test.style.left = "0px";   
     }   
     function down(event)   
     {   
        eventevent = event || window.event;    
        dragging = true;    
        mouseX = parseInt(event.clientX);   
        mouseY = parseInt(event.clientY);   
        objY = parseInt(test.style.top);   
        objX = parseInt(test.style.left);   
     }   
     function move(event){   
        eventevent = event || window.event;    
        if(dragging == true){   
            var x,y;   
            y = event.clientY - mouseY + objY;   
            x = event.clientX - mouseX + objX;   
            test.style.top = y + "px";   
            test.style.left = x + "px";   
        }   
     }   
     function up(){   
        dragging = false;   
     }   
     // --></mce:script>    
     </head>    
         
     <body>    
     <div id="test" style="border:1px solid; width:400px; background:#CCCCCC;">    
       <p>我是拖拽示例DIV。</p>    
       <p>可以試驗(yàn)一下效果。</p>    
     </div>     
     </body>    
     </html>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看