百度空间 | 百度首页 
 
查看文章
 
对google个性主页的拖拽效果的js的完整注释-1(强烈推荐)
2006年11月14日 星期二 下午 04:36
// 工具类,使用Util的命名空间,方便管理
var  Util  =   new  Object();
// 获取http header里面的UserAgent,浏览器信息
Util.getUserAgent  =  navigator.userAgent;
// 是否是Gecko核心的Browser,比如Mozila、Firefox
Util.isGecko  =  Util.getUserAgent.indexOf( " Gecko " !=   - 1 ;
// 是否是Opera
Util.isOpera  =  Util.getUserAgent.indexOf( " Opera " !=   - 1 ;
// 获取一个element的offset信息,其实就是相对于Body的padding以内的绝对坐标
//
后面一个参数如果是true则获取offsetLeft,false则是offsetTop
//
关于offset、style、client等坐标的定义参考dindin的这个帖子:http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset  =   function  (el, isLeft) {
    
var  retValue  =   0 ;
    
while  (el  !=   null ) {
        retValue 
+=  el[ " offset "   +  (isLeft  ?   " Left "  :  " Top " )];
        el 
=  el.offsetParent;
    }
    
return  retValue;
};
// 将一个function(参数中的funcName是这个fuction的名字)绑定到一个element上,并且以这个element的上下文运行,其实是一种继承,这个可以google些文章看看
Util.bindFunction  =   function  (el, fucName) {
    
return   function  () {
        
return  el[fucName].apply(el, arguments);
    };
};
// 重新计算所有的可以拖拽的element的坐标,对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标,防止遮叠
//
计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff  =   function  (el) {
    
for  ( var  i  =   0 ; i  <  Util.dragArray.length; i ++ ) {
        
var  ele  =  Util.dragArray[i];
        ele.elm.pagePosLeft 
=  Util.getOffset(ele.elm,  true );
        ele.elm.pagePosTop 
=  Util.getOffset(ele.elm,  false );
    }
    
var  nextSib  =  el.elm.nextSibling;
    
while  (nextSib) {
        nextSib.pagePosTop 
-=  el.elm.offsetHeight;
        nextSib 
=  nextSib.nextSibling;
    }
};

// 隐藏Google Ig中间那个table,也就是拖拽的容器,配合show一般就是刷新用,解决一些浏览器的怪癖
Util.hide  =   function  () {
    Util.rootElement.style.display 
=   " none " ;
};
// 显示Google Ig中间那个table,解释同上
Util.show  =   function  () {
    Util.rootElement.style.display 
=   "" ;
};

// 移动时显示的占位虚线框
ghostElement  =   null ;
// 获取这个虚线框,通过dom动态生成
getGhostElement  =   function  () {
    
if  ( ! ghostElement) {
        ghostElement 
=  document.createElement( " DIV " );
        ghostElement.className 
=   " modbox " ;
        ghostElement.backgroundColor 
=   "" ;
        ghostElement.style.border 
=   " 2px dashed #aaa " ;
        ghostElement.innerHTML 
=   " &nbsp; " ;
    }
    
return  ghostElement;
};

类别:学而时习之 | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu