鼠标拖动图片的JS代码

2024-09-05 12:21:13

字体：大中小

来源：转载

供稿：网友

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

<html><HEAD><title>鼠标拖动图片</title><style type="text/css"></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="/d/file/p/2024/09-05/639b0aecfa5c77ac9b31810179e119c7.jpg" class="dragme"></div></body></html>

上一篇：鼠标移到图片上，图片开始疯狂抖动

下一篇：用按钮控制的左右图片滚动特效