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 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
js select常用操作控制代码
Mar 16 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python格式化字符串实例总结
2014/09/28 Python
Python解析最简单的验证码
2016/01/07 Python
Python实现调度算法代码详解
2017/12/01 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python实现flappy bird游戏
2018/12/24 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python怎么自定义捕获错误
2020/06/29 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
中学生爱国演讲稿
2013/12/31 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
开展创先争优活动总结
2014/08/28 职场文书
营销经理工作检讨书
2014/11/03 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
五年级数学教学反思
2016/02/16 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python