代码描述:js div拖动效果。js实现的div拖动效果实例代码
div的拖动效果在很多效果中都有应用,当然还有很多附加的功能,本章节只是给拖动效果,并介绍一下它的实现过程。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>div拖动效果-51前端</title> <style type="text/css"> #oDiv { position:absolute; width:100px; height:60px; border:1px solid silver; left:100px; top:100px; z-index:9999; } #move { cursor:move; width:100%; height:15px; background-color:#0066cc; font-size:10px; } #close { float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White; font-size:15px; } </style> <script type='text/javascript'> var offset_x; var offset_y; function Milan_StartMove(oEvent,div_id) { var whichButton; if(document.all&&oEvent.button==1) { whichButton=true; } else { if(oEvent.button==0) whichButton=true; } if(whichButton) { offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); document.documentElement.onmousemove=function(mEvent) { var eEvent=mEvent||event; var oDiv=div_id; var x=eEvent.clientX-offset_x; var y=eEvent.clientY-offset_y; oDiv.style.left=(x)+"px"; oDiv.style.top=(y)+"px"; } } } function Milan_StopMove(oEvent) { document.documentElement.onmousemove=null; } function div_Close(o) {o.style.display="none";} window.onload=function() { var omove=document.getElementById("move"); var oclose=document.getElementById("close"); omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)} omove.onmouseup=function(){Milan_StopMove(event)} oclose.onclick=function(){div_Close(this.parentNode.parentNode)} } </script> </head> <body> <div id="oDiv"> <div id="move"> <div id="close">X</div> </div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能