js实现一个砖头在页面拖拉效果

Posted 颜小媛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现一个砖头在页面拖拉效果相关的知识,希望对你有一定的参考价值。

用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果:

刚开始时:

鼠标点击拖动后:

实现代码:

  

<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>

 

以上是关于js实现一个砖头在页面拖拉效果的主要内容,如果未能解决你的问题,请参考以下文章

手机页面内容超出屏幕宽度时实现可拖拉滑动效果

JS如何实现页面的动态效果和交互效果?(用语言描述)

canvas实现矩形画图效果

canvas实现矩形画图效果

WPF图片拖拉变形合成

js如何实现点击导航栏后相应导航栏实现选中效果的切换