<html>
<HEAD> <title>在同一页面拖动多个图片</title> <style type="text/css"> <!-- .dragme{position:relative;} --> </style> <script type="text/javascript"> <!-- Begin 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") 在同一页面增加多个拖动对象,也就是多个图片,在指定区域内拖动,学习JS拖动值得一看。
{
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"); // End -->
</script> </HEAD> <BODY> <div align="center"> <img src="/images/logo.gif" class="dragme" /> <img src="/jscss/demoimg/logo_demo1.gif" class="dragme" /> </div> </body> </html> |
|
来自: 我依然125 > 《js图片切换代码集》