js实现简单图片拖拽效果


Posted in Javascript onFebruary 22, 2021

本文实例为大家分享了js实现简单图片拖拽效果的具体代码,供大家参考,具体内容如下

//图片需要自己导入
<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>在当前显示区范围内实现点不到的小方块</title>
 <style>
 div{position:fixed;width:100px;height:100px;
  background-image:url(images/xiaoxin.gif);
   background-size:100%;
 }
 </style>
 
 </head>
 <body>
 <div id="pop"></div>
 <script>
 let pop = document.getElementById("pop")
 //定义开关变量,用于控制图片是否跟随鼠标移动
 let canMove = false;
 //在开始拖拽时,就保存鼠标距div左上角的相对位置
 let offsetX,offsetY;
 //当在pop上按下鼠标时
 pop.onmousedown=function(e){
  //可以开始拖动
  canMove=true;
  offsetX=e.offsetX;
  offsetY=e.offsetY;
 }
 //当鼠标在窗口移动时
 window.onmousemove=function(e){
  //只有当pop可以移动时
  if(canMove==true){
  //让pop跟随鼠标移动
  //开始拖拽时,立刻获得鼠标距图片左上角的相对位置
  //求pop的top和left
  let left=e.clientX-offsetX;
  let top=e.clientY-offsetY;
  //设置pop的top和left属性
   pop.style.left=left+"px";
   pop.style.top=top+"px";
  }
 }
 //当在pop上抬起鼠标按键时
 pop.onmouseup=function(){
  //停止拖拽
  canMove=false
 } 
 </script>
 </body>
</html>

效果图:

js实现简单图片拖拽效果

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

Javascript 相关文章推荐
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vite的新体验
Feb 22 #Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
Nest.js 授权验证的方法示例
Feb 22 #Javascript
使用原生javascript开发计算器实例代码
Feb 21 #Javascript
Nest.js环境变量配置与序列化详解
Feb 21 #Javascript
关于Js中new操作符的作用详解
Feb 21 #Javascript
You might like
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
图片完美缩放
2006/09/07 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
python interpolate插值实例
2020/07/06 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
促销活动策划方案
2014/01/12 职场文书
语文教学感言
2014/02/06 职场文书
铁路工务反思材料
2014/02/07 职场文书
家长对孩子的评语
2014/04/18 职场文书
英语专业求职信
2014/07/08 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
人民币使用说明书
2019/04/17 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python