js实现iGoogleDivDrag模块拖动层拖动特效的方法
本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js实现iGoogleDivDrag模块拖动层拖动效果</title> <styletype="text/css"> *{margin:0px;padding:0px;} body{position:relative;width:780px;height:800px;border:1pxsolidred} .drag{width:200px;height:100px;border:1pxsolid#000;margin:20px;background:#fff} .dragh1{margin:0px;padding:0px;font-size:12px;height:18px;line-height:18px;background:#E0E7F3;text-indent:20px;cursor:move;} .center{margin:200px;border:3pxsolidred} </style> <scripttype="text/javascript"></script> </head> <body> <divclass="drag"> <h1><strong>www.baidu.com</strong></h1> </div> <divclass="drag"> <h1>www.163.com</h1> </div> <divclass="drag"> <h1><strong>www.nhooo.com</strong></h1> </div> <divclass="drag"><h1>测试二</h1></div> <divclass="drag"><h1>测试三</h1></div> <divclass="drag"><h1>测试四</h1></div> <divclass="drag"><h1>测试五</h1></div> </body> </html> <scripttype="text/javascript"> /* Author :popper.w Version:v2.0 */ varDragZindexNumber=0; functiondrag(obj){ varox,oy,ex,xy,tag=0,mask=0; if(tag==0){ obj.onmousedown=function(e) { if(mask==1){return;} obj.style.zIndex=DragZindexNumber++; transp(obj,"start") tag=1; vare=e||window.event; ex=getEventOffset(e).offsetX; ey=getEventOffset(e).offsetY; ox=parseInt(obj.offsetLeft); oy=parseInt(obj.offsetTop); tempDiv=document.createElement("div"); with(tempDiv.style) { width=obj.offsetWidth+"px"; height=obj.offsetHeight+"px"; border="1pxdottedred"; position="absolute"; left=obj.offsetLeft+"px"; top=obj.offsetTop+"px"; zIndex=999; } document.body.appendChild(tempDiv); this.ele=tempDiv; fDragStart(tempDiv); document.body.onmousemove=function(e){ if(tag==1) { vare=e||window.event; tempDiv.style.left=parseInt(e.clientX)-ex+"px"; tempDiv.style.top=parseInt(e.clientY)-ey+"px"; } else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)} } tempDiv.onmouseup=function(e) { vare=e||window.event; fDragEnd(tempDiv); obj.style.position="absolute"; movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20); tempDiv.parentNode.removeChild(tempDiv); tag=0; } } } } functionmovie(o,l,t){ vara=1; mask=1; varol=parseInt(o.offsetLeft); varot=parseInt(o.offsetTop); variTimer=setInterval(function(){ if(a==10) { transp(o,"end"); mask=0; clearInterval(iTimer); } o.style.left=ol+a*(l-ol)/10+"px"; o.style.top=ot+a*(t-ot)/10+"px"; a++; },20); } functionfCancleBubble(e) { vare=window.event||e; if(e.preventDefault)e.preventDefault(); elsee.returnValue=false; } functiontransp(o,mode){ if(mode=="start"){ if(document.all){ o.style.filter="Alpha(Opacity=50)"; }else{ o.style.opacity=0.5; } } else{ if(document.all){ o.style.filter="Alpha(Opacity=100)"; }else{ o.style.opacity=1; } } } functiongetOffset(evt) { vartarget=evt.target; if(target.offsetLeft==undefined) { target=target.parentNode; } varpageCoord=getPageCoord(target); vareventCoord= { x:window.pageXOffset+evt.clientX, y:window.pageYOffset+evt.clientY }; varoffset= { offsetX:eventCoord.x-pageCoord.x, offsetY:eventCoord.y-pageCoord.y }; returnoffset; } functiongetPageCoord(element) { varcoord={x:0,y:0}; while(element) { coord.x+=element.offsetLeft; coord.y+=element.offsetTop; element=element.offsetParent; } returncoord; } functiongetEventOffset(evt) { varmsg=""; if(evt.offsetX==undefined) { varevtOffsets=getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } else { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } returnmsg; } functionfDragStart(XEle) { switch(fCkBrs()) { case3: window.getSelection().removeAllRanges(); break; default: XEle.setCapture(); break; } } functionfDragEnd(XEle) { switch(fCkBrs()) { case3: window.getSelection().removeAllRanges(); break; default: XEle.releaseCapture(); break; } } functionfCkBrs() { switch(navigator.appName) { case'Opera':return2; case'Netscape':return3; default:return1; } } varelement=document.getElementsByTagName("div"); for(vari=0;i<element.length;i++){ if(element[i].className=="drag"){ drag(element[i])} } </script>
希望本文所述对大家的javascript程序设计有所帮助。