网络编程

js实现砖头在页面拖拉效果
网络编程 2025/10/27 佚名
3 2

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

刚开始时：

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,页面拖拉
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“js实现砖头在页面拖拉效果”

暂无“js实现砖头在页面拖拉效果”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com