用鼠标拖动图片的JS代码

代码简介：

用鼠标拖动一个图片移动，就像拖动一个层一样，这是一个JS拖动类代码，你可以无限制的增加图片，代码复用率比较高。

代码内容：

View Code

<html><HEAD><title>用鼠标拖动图片的JS代码 - www.webdm.cn</title><style type="text/css"><!--.dragme{position:relative;}--></style><script type="text/javascript">var ie=document.all;var nn6=document.getElementById && !document.all;var isdrag=false;var x,y;var dobj;

function movemouse(e){if (isdrag){dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;return false;}}

function selectmouse(e){var fobj       = nn6 ? e.target : event.srcElement;var topelement = nn6 ? "HTML" : "BODY";while (fobj.tagName != topelement  &&  fobj.className != "dragme")  {    fobj = nn6 ? fobj.parentNode : fobj.parentElement;  }if (fobj.className=="dragme")  {    isdrag = true;    dobj = fobj;    tx = parseInt(dobj.style.left+0);    ty = parseInt(dobj.style.top+0);    x = nn6 ? e.clientX : event.clientX;    y = nn6 ? e.clientY : event.clientY;    document.onmousemove=movemouse;return false;  }

}document.onmousedown=selectmouse;document.onmouseup=new Function("isdrag=false");</script></HEAD><BODY><div align="center"><img src="http://www.webdm.cn/images/wall1_s.jpg" class="dragme"></div></body></html><br /><p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！

</p>

代码来自：http://www.webdm.cn/webcode/2eb66e07-29a5-493a-985f-01fe37ec1ca2.html

转载于:https://www.cnblogs.com/webdm/archive/2012/01/06/2314245.html

用鼠标拖动图片的JS代码相关推荐

鼠标拖动div移动js代码
1.代码 var disX=0;var disY=0;$('.private_area').on('mousedown',function(event) {disX=event.clientX-$(' ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
js吧html中的图片改为数组图片,巧用数组制作图片切换js代码
巧用数组制作图片切换js代码发布于 2017-07-05 07:15:55 | 104 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript 是一种由 ...
Unity3D 鼠标拖动和旋转物体以及鼠标拖动图片
1.鼠标拖动物体Cube using System.Collections; using System.Collections.Generic; using UnityEngine; using Un ...
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
Unity UGUI实现鼠标拖动图片
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...

用鼠标拖动图片的JS代码

用鼠标拖动图片的JS代码相关推荐

最新文章

热门文章