鼠标移动图片的示例代码

最新推荐文章于 2021-06-04 10:24:05 发布

原创最新推荐文章于 2021-06-04 10:24:05 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #null #div

博客展示了实现图片鼠标交互功能的代码。通过定义 onmousedown、onmousemove 和 onmouseup 事件，分别调用 one()、two() 和 end() 函数，实现图片的拖动效果。代码中对鼠标位置和元素位置进行计算和设置。

代码如下：
<img src="http://wpa.qq.com/pa?p=1:25941:13" onmousedown=one() onmousemove=two() onmouseup=end()><p> <img src="http://www.nhacks.com/email/email.php?mail_e=HRF6emJKXwY%3D&iv=W4Eu5LY%3D&domain=R01haWw%3D&ext=0" onmousedown=one() onmousemove=two() onmouseup=end()><p> Test Test... <script> var oldx=0,oldy=0,oldobj=null function one(){ oldobj=event.srcElement oldx=event.x-oldobj.offsetLeft;oldy=event.y-oldobj.offsetTop; oldobj.style.position="absolute" oldobj.setCapture() } function two(){ if(oldobj==null)return false oldobj.style.left=event.x-oldx oldobj.style.top=event.y-oldy } function end(){ oldobj=null;document.releaseCapture(); } //work:muyuanhua </script>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]