本例利用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>
最终效果:
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年06月03日
2024年06月03日
- 张学友《昨夜梦魂中 25周年金碟》[WAV+CUE][400MB]
- 韩曦《为你钟情》传奇女低音[DTS-WAV]
- 百代群星《最啱听》(88年EMI东芝1MTO首版)[WAV+CUE]
- 罗斯特洛波维奇、布里顿《舒伯特-阿佩乔尼奏鸣曲》1995[WAV+CUE]
- 群星《超高品质流行女声大碟 静听女人心 2CD》[WAV+CUE][1.3GB]
- BEYOND《无悔这一生 2023》 [WAV+CUE][690MB]
- 群星《30首最发烧经典老歌 情牵男人心 2CD》[WAV+CUE][1.4GB]
- 群星《不老的情歌-至尊版2CD》WAV分轨
- 岁月留声机群星《七十年代人金曲回顾》(黑胶)2CD[WAV分轨]
- 群星-世纪难忘金曲(迪安唱片)5CD[WAV]
- HenrietteFaure-DebussyEstampesPrludes,LivreI(MonoVersion)[FLAC]
- 吕方1992-弯弯十八首[香港][WAV+CUE]
- 经典歌曲珍藏专辑《民歌30年·真情依旧》3CD[WAV+CUE]
- 群星《时尚流行发烧极品 非同凡响 第一辑 2CD》[WAV/分轨][1.3GB]
- 陈曦《多年以后》HQⅡ头版限量编号[WAV+CUE][520MB]