欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)拖拽功能

 更新時(shí)間：2017年03月01日 10:39:29   作者：13751343826  
本文主要介紹了js實(shí)現(xiàn)拖拽效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果圖：(紅色方塊可任意拖動(dòng))

代碼如下：

 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 body{
 background:url("img/2345_image_file_copy_1.jpg");
 }
 #d1{
 width:100px;
 height:100px;
 background:red;
 margin-left:300px;
 }
 </style>
 </head>
 <body>
 <div id="d1"></div>
 </body>
 <script>
 window.onload=function(){
 var d1=document.getElementById("d1");
 d1.onmousedown=function(e){
 var mouseX=e.clientX;
 var mouseY=e.clientY;//計(jì)算xy
 var pianyiX=mouseX-d1.offsetLeft;
 var pianyiY=mouseY-d1.offsetTop;
 document.onmousemove=function(e){
 var newX=e.clientX-pianyiX;
 var newY=e.clientY-pianyiY;
 d1.style.marginLeft=newX+"px";
 d1.style.marginTop=newY+"px";
 }
 };
 document.onmouseup = function(e){
 document.onmousemove = null ;
 };
 }
 /*
 結(jié)果，上面的onmousemove要寫在document上,我寫在div上導(dǎo)致錯(cuò)誤
 */
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論