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


Posted in Javascript onNovember 20, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
AngularJS入门教程之模块化操作用法示例
Nov 02 #Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 #Javascript
jQuery图片切换动画特效
Nov 02 #Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 #Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
php绘制圆形的方法
2015/01/24 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python 生成器协程运算实例
2017/09/04 Python
python之文件读取一行一行的方法
2018/07/12 Python
django 类视图的使用方法详解
2019/07/24 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
十佳护士获奖感言
2014/02/18 职场文书
三严三实对照检查材料
2014/09/22 职场文书
募捐感谢信
2015/01/22 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android