鼠標拖動圖片的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>

上一篇：鼠標移到圖片上，圖片開始瘋狂抖動

下一篇：用按鈕控制的左右圖片滾動特效