zoukankan      html  css  js  c++  java
  • js实现一个砖头在页面拖拉效果

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

    刚开始时:

    鼠标点击拖动后:

    实现代码:

      

    <html>
       <head>
           <meta charset="utf-8">
           <style type="text/css">
         *{
             margin:0px;
             padding:0px;
            }
        #zhuantou{
            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>

  • 相关阅读:
    第十次作业
    java第九次作业
    优秀的计算机编程类博客 和 文章
    SQLAlchemy使用总结
    Go Web
    beego
    项目注意事项
    爬虫
    Linux笔记
    计算机英语
  • 原文地址:https://www.cnblogs.com/yanyuanyuan/p/6021243.html
Copyright © 2011-2022 走看看