个人中心
gpt4 book ai didi

js实现简单图片拖拽效果

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js实现简单图片拖拽效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//图片需要自己导入
<!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实现简单图片拖拽效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/qq_44801336/article/details/104492730 。

最后此篇关于js实现简单图片拖拽效果的文章就讲到这里了,如果你想了解更多关于js实现简单图片拖拽效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： linux服务器快速卸载安装node环境(简单上手)
文章推荐： k8s node节点重新加入master集群的实现
文章推荐： 用vite搭建vue3应用的实现方法
文章推荐： 详解Vite的新体验
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com