js實作iGoogleDivDrag模組拖曳層拖曳特效的方法_javascript技巧

本文實例講述了js實作iGoogleDivDrag模組拖曳層拖曳特效的方法。分享給大家供大家參考。具體實作方法如下：

複製程式碼 程式碼如下:

 

 

www.baidu.com

 

 

 

www.163.com

 

 

 

www.jb51.net

 

 

测试二

 

测试三

 

测试四

 

测试五

身體>


/*
作者：popper.w
版本：v2.0
*/
var DragZindexNumber=0;
函數拖曳（obj）{
var ox,oy,ex,xy,tag=0,mask=0;
if(標籤==0){
obj.onmousedown=函數(e)
 {  
  if(掩碼==1){返回; }
  obj.style.zIndex=DragZindexNumber ;
     transp(obj,"開始")
  標籤=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");
  與（tempDiv.style）
   {
   width=obj.offsetWidth "px";
   height=obj.offsetHeight "px";
   border="1px 紅色虛線";
   位置=「絕對」;
   left=obj.offsetLeft "px";
   top=obj.offsetTop "px";
   zIndex=999;
   }
  document.body.appendChild(tempDiv);
  this.ele=tempDiv;
  fDragStart(tempDiv);
  document.body.onmousemove=函數(e){
  if(標籤==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=函數(e)
  {
  var e=e||window.event;
  fDragEnd(tempDiv);
  obj.style.position="絕對";
  movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);
  tempDiv.parentNode.removeChild(tempDiv);
  標籤=0;
  }
  }
 }
}
函數電影(o,l,t){
  var a=1;
  遮罩=1;
  var ol=parseInt(o.offsetLeft);
  var ot=parseInt(o.offsetTop);
  var iTimer=setInterval(function(){
   if(a==10)
    {
  transp(o,"結束");
  遮罩=0;
  清除間隔(iTimer);
  }
   o.style.left=ol a*(l-ol)/10 "px";
   o.style.top=ot a*(t-ot)/10 "px";
   一;
},20);
}
函數 fCancleBubble(e)
{
 var e = window.event || e;
 if (e.preventDefault) e.preventDefault();
 否則 e.returnValue = false;
}
函數 transp(o,mode){
           if(mode=="開始"){
   if(document.all){
    o.style.filter = "Alpha(不透明度=50)";
   }其他{
    o.style.opacity = 0.5;
   }
   }
    否則{
      if(document.all){
    o.style.filter = "Alpha(不透明度=100)";
   }其他{
    o.style.opacity = 1;
   }
    }
}
函數 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 偏移量 =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  返回偏移量；
}
函數 getPageCoord(element)
{
  var 座標 = {x: 0, y: 0};
  while（元素）
  {
    coord.x = element.offsetLeft;
    coord.y = element.offsetTop;
    element = element.offsetParent;
  }
  返迴座標；
}
函數 getEventOffset(evt)
{
  var msg = "";
  if (evt.offsetX == undefined)
  {
    var evtOffsets = getOffset(evt);
 msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};
  }
  其他
  {
 msg={offsetX:evt.offsetX,offsetY:evt.offsetY};
  }
  回訊息；
}
函數 fDragStart(XEle)
{
 開關（fCkBrs（））
 {
   狀況3：
    window.getSelection().removeAllRanges();
    休息；
   
   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程式設計有所幫助。