本例利用jQuery实现一个鼠标托动图片的功能。
首先设一个wrapper,wrapper内的坐标即图片移动的坐标
#wrapper{ width: 1000px; height:1000px; position:relative; }
设置图片div,这个div即要拖动的div
#div1{ position: absolute; left:0px; top:0px; width: 300px; height: 200px; background: url("d:/Pictures/Earth.jpg"); background-size:contain; }
上面设置了wrapper的定位为relative,div1的定位为absolute。
接下来设计拖动的算法:
思路如下:
1.鼠标点下时让div跟随鼠标移动
2.鼠标松开时停止跟随
首先需要一个函数,他会将该div的坐标改变为当前鼠标的位置:
首先需要定义几个变量,保存当前鼠标的坐标以及图片的坐标
var timer; var mouseX=0; var mouseY=0; var pic_width = parseInt($("#div1").css("width")); var pic_height = parseInt($("#div1").css("height"));
那么现在就需要为wrapper添加一个事件监听器,鼠标在wrapper中移动时,修改变量mousex,mousey的值
$("#wrapper").mousemove(function(e){ mouseX = e.clientX; mouseY = e.clientY; });
编写follow函数,并用计时器调用它
$("#div1").mousedown(function(){ timer=setInterval(follow,10); }); $("#div1").mouseup(function(){ clearInterval(timer); }); var follow = function(){ $("#div1").css("left",mouseX-pic_width/2); $("#div1").css("top",mouseY-pic_height/2); };
完整代码如下所示:
<!doctype html> <html> <head> <script type = "text/javascript" src = "jquery.js"></script> <style type = "text/css"> #wrapper{ width: 1000px; height:1000px; position: relative; background: linear-gradient(lightblue,white); font-size: 40px; } #div1{ position: absolute; left:0px; top:0px; width: 300px; height: 200px; background: url("d:/Pictures/Earth.jpg"); background-size:contain; } </style> </head> <body> <div id = "wrapper"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit numquam accusamus explicabo praesentium laudantium et accusantium, ab ipsum, excepturi necessitatibus quos iste ad qui deleniti sed debitis reiciendis quam nisi. <div id = "div1"> </div> </div> <script> var timer; var mouseX=0; var mouseY=0; var pic_width = parseInt($("#div1").css("width")); var pic_height = parseInt($("#div1").css("height")); $("#wrapper").mousemove(function(e){ mouseX = e.clientX; mouseY = e.clientY; }); $("#div1").mousedown(function(){ timer=setInterval(follow,10); }); $("#div1").mouseup(function(){ clearInterval(timer); }); var follow = function(){ $("#div1").css("left",mouseX-pic_width/2); $("#div1").css("top",mouseY-pic_height/2); }; </script> </body> </html>
最终效果:
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“jQuery实现鼠标拖动图片功能”评论...
更新日志
2024年05月08日
2024年05月08日
- 原神:技术又升级啦?新增角色动作与神态,期待全方面普及
- 林俊杰.2020-幸存者(EP)【华纳】【WAV+CUE】
- 方志耀.1992-给我一点你的爱【飞碟】【WAV+CUE】
- 华晨宇.2015-异类【天娱传媒】【WAV+CUE】
- 月爱解说 王者荣耀一套带走爆发小狐狸妲己攻略
- 吴宇深《时光》[320K/MP3][61.94MB]
- 吴宇深《时光》[FLAC/分轨][86.52MB]
- 张宇《好男人的情歌 精选16首最爱发烧情歌》[WAV+CUE][600MB]
- 原神虹色大巡回第一关攻略 音符补缺打法位置分享
- 王者荣耀五五朋友星活动玩法介绍 规则一览
- 少年西游记2今日全平台公测 真国潮真轻松真福利
- 崩坏星穹铁道2.2光锥怎么抽 崩铁2.2光锥抽取建议
- 崩坏星穹铁道2.2无边曼舞光锥怎么样 崩铁新四星光锥无边曼舞强度
- 崩坏星穹铁道2.2夜色流光溢彩强度介绍 夜色流光溢彩光锥介绍
- 苹果安装双系统好不好,苹果装双系统好用吗