WEB开发人员网络
→
WEB前台
→
JavaScript
→
拖动Drag
兼容较好的拖动代码
提供者: 发布时间:2007-11-21 浏览:[2313]
搜索更多相关信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <div id="aaa" style="position:absolute;left:100px;top:100px;background-color:#000000;opacity:1;filter:Alpha(Opacity=100);" onmousedown="beginDrag(this,event);"><img src="http://www.baidu.com/img/logo.gif"/></div> <div style="position:absolute;left:300px;top:300px;background-color:#000000;opacity:1;filter:Alpha(Opacity=100);" onmousedown="beginDrag(this,event);"><img src="http://www.baidu.com/img/logo.gif"/></div> <div style="position:absolute;top:1000px;width:10px;height:10px;"></div> <!--以后有div要拖动,只需要加一个onmousedown="beginDrag(this,event)"就行了--> <script type="text/javascript"> function beginDrag(me,evt){ evt = evt?evt:window.event; var detlaX = evt.clientX - parseInt(me.style.left); var detlaY = evt.clientY - parseInt(me.style.top); if(document.all){ me.attachEvent("onmousemove",move); me.attachEvent("onmouseup",up); me.setCapture(); }else{ document.addEventListener("mousemove",move,true); document.addEventListener("mouseup",up,true); evt.stopPropagation(); evt.preventDefault(); } function move(evt){ me.style.left = evt.clientX - detlaX + "px"; me.style.top = evt.clientY - detlaY + "px"; if(document.all){ me.style.filter = "Alpha(Opacity=50)"; }else{ me.style.opacity = 0.5; evt.stopPropagation(); } } function up(evt){ if(document.all){ me.style.filter = "Alpha(Opacity=100)"; me.detachEvent("onmousemove",move); me.detachEvent("onmouseup",up); me.releaseCapture(); }else{ me.style.opacity = 1; document.removeEventListener("mousemove",move,true); document.removeEventListener("mouseup",up,true); evt.stopPropagation(); } } } var endTop = 0; var aaa = document.getElementById("aaa"); function bbb(){ var startTop = document.documentElement.scrollTop; var per = 0.1*(startTop - endTop); if(per>0) per = Math.ceil(per); else per = Math.floor(per); aaa.style.top = parseInt(aaa.style.top) + per + "px"; endTop += per; } window.setInterval(bbb,1); </script> </body> </html>
提示:您可以先修改部分代码再运行
下一篇:
层拖动效果,兼容IE6/FF
上一篇:
增加用户亲和力-鼠标拖动网页[兼容FF]