js实现iGoogleDivDrag模块拖动层拖动特效的方法_javascript技巧

本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

js实现iGoogle Div Drag 模块拖动 层拖动效果 *{margin:0px; padding:0px;} body{position:relative; width:780px; height:800px; border:1px solid red} .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff} .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;} .center{ margin:200px; border:3px solid red}

www.baidu.com www.163.com www.jb51.net 测试二 测试三 测试四 测试五

/* Author : popper.w Version : v2.0 */ var DragZindexNumber=0; function drag(obj){ var ox,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; var e = 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="1px dotted red"; 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) { var e=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) { var e=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; } } } } function movie(o,l,t){ var a=1; mask=1; var ol=parseInt(o.offsetLeft); var ot=parseInt(o.offsetTop); var iTimer=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); } function fCancleBubble(e) { var e = window.event || e; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } function transp(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; } } } function getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefined) { target = target.parentNode; } var pageCoord = getPageCoord(target); var eventCoord = { x: window.pageXOffset + evt.clientX, y: window.pageYOffset + evt.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element) { coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } function getEventOffset(evt) { var msg = ""; if (evt.offsetX == undefined) { var evtOffsets = getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } else { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } return msg; } function fDragStart(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.setCapture(); break; } } function fDragEnd(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.releaseCapture(); break; } } function fCkBrs() { switch (navigator.appName) { case 'Opera': return 2; case 'Netscape': return 3; default: return 1; } } var element=document.getElementsByTagName("div"); for(var i=0;i if(element[i].className=="drag"){ drag(element[i])} } 希望本文所述对大家的javascript程序设计有所帮助。

js实现iGoogleDivDrag模块拖动层拖动特效的方法_javascript技巧

www.baidu.com

www.163.com

www.jb51.net

测试二

测试三

测试四

测试五

相关文章