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

js實(shí)現(xiàn)磚頭在頁面拖拉效果

 更新時(shí)間：2020年11月20日 14:14:22   作者：烽火戲諸諸諸侯  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)磚頭在頁面拖拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用js實(shí)現(xiàn)一個(gè)磚頭在頁面，但鼠標(biāo)點(diǎn)擊拖動(dòng)時(shí)，磚頭在頁面上形成拖拉效果：

剛開始時(shí)：

鼠標(biāo)點(diǎn)擊拖動(dòng)后：

實(shí)現(xiàn)代碼：

<html>
 <head>
  <meta charset="utf-8">
  <style type="text/css">
  *{
   margin:0px;
   padding:0px;
  }
 #zhuantou{
  width:120px;
  height:60px;
  background-image:url(1.jpg);
  position:fixed;
  left:100px;
   top:50px;
  }
  </style>
 <body>
  <div id="zhuantou">
  </div>
  <script>
  var zt=document.querySelector("#zhuantou");
  var isPressed=false;
  var offsetX=0;
  var offsetY=0;
  zt.onmousedown=function(event){
     isPressed=true;
     this.style.cursor="move";
     offsetX=event.offsetX;
    offsetY=event.offsetY;
  };
  zt.onmouseup=function(){
    isPressed=false;
    this.style.cursor="default";
  };
  zt.onmousemove=function(event){
   if(!isPressed){
     return;
    }
   zt.style.left=(event.clientX-offsetX)+"px";
   zt.style.top=(event.clientY-offsetX)+"px";
  };
 </script>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論