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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 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
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
对Django外键关系的描述
2019/07/26 Python
python类的实例化问题解决
2019/08/31 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python内存映射文件读写方式
2020/04/24 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
大学生学习2014全国两会心得体会
2014/03/13 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
法制宣传口号
2014/06/16 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
户籍证明模板
2014/09/28 职场文书
区域经理岗位职责
2015/02/02 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2019同学聚会主持词
2019/05/06 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python