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

更新时间：2020年11月20日 14:14:22 作者：烽火戏诸诸诸侯

这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

KnockoutJs快速入门教程
这篇文章主要为大家分享了KnockoutJs快速入门教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中，感兴趣的小伙伴们可以参考一下
2016-05-05
touch.js 拖动、缩放、旋转（鼠标手势）功能代码
这篇文章主要介绍了touch.js 拖动、缩放、旋转（鼠标手势)功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
js获取数组中的最大值的9种方法总结
这篇文章主要为大家详细介绍了js获取数组中的最大值的9种方法，以及每种方法的工作原理和用法，文中的示例代码讲解详细，需要的可以参考下
2023-08-08
el-select加上搜索查询时限制开头空格输入的解决方案
这篇文章主要介绍了el-select加上搜索查询时,限制开头空格输入的解决方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02
基于Bootstrap的标签页组件及bootstrap-tab使用说明
这篇文章主要介绍了基于Bootstrap的标签页组件及bootstrap-tab使用说明,需要的朋友可以参考下
2017-07-07
JavaScript实现网页对象拖放功能的方法
这篇文章主要介绍了JavaScript实现网页对象拖放功能的方法,涉及javascript针对浏览器的判断、事件爱你的添加与移除等相关操作技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
javascript时间函数基础介绍
这篇文章主要介绍了javascript中提供了Date对象来进行时间和日期的计算，这里简单的介绍下，方便需要的朋友
2013-03-03
Javascript File和Blob详解
这篇文章主要为大家介绍了Javascript File和Blob，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false
这篇文章主要给大家介绍了关于JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
JavaScript实现京东放大镜效果
这篇文章主要为大家详细介绍了JavaScript实现京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12