本文实例为大家分享了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,图片拖拽,拖拽
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“js实现简单图片拖拽效果”评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]