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实现DIV的一些简单控制
Jun 04 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
详解jQuery中的事件
Dec 14 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
谈谈新手如何学习PHP
2006/12/14 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
华为python面试题
2016/05/03 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
个人贷款承诺书
2014/03/28 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技