google首页效果 js特效 全注释 记得当时分析了好长时间

最近将以前分析的google首页效果 拿了出来,发现挺有意思  拿来和大家分享一下

index.js


(//匿名函数，不需要被调用直接运行
  function()
  {
   //浏览器类型
    var e=navigator.userAgent.toLowerCase();
    //是否是下面各种浏览器(opera,ie,safari)
    google.isOpera = e.indexOf("opera")!=-1;
    google.isIE = document.all&&e.indexOf("msie")!=-1&&!google.isOpera;
    google.isSafari = e.indexOf("safari")!=-1;
    /*
    * obj-- 对象
    * b--mouseover,mouseout
    * evet--onmouseover,onmouseout
    * fuc--为事件响应调用的方法
    */
    //为邦定事件，onmouseover,onmouseout  
    window.google.bind = function(obj,evet,func)
    {
        var onevet = "on"+evet;/*onevet=onmouseover,onmouseout之类的事件*/
        if (obj.addEventListener)
            obj.addEventListener(evet,func,false);
        else
        {
            if(obj.attachEvent)
                obj.attachEvent(onevet,func);
            else
            {
                var h = obj[onevet];
                obj[evet] = function()
                {
                    var f = h.apply(this,arguments);
                    var g = callFunc.apply(this,arguments);
                    return (f == undefined)?g:(g == undefined?f:g&&f);
                }
            }
        }
     };
  }
)();

(
  function()
  {
    var PIC = "tool.png";
    //return all the onmouseover,onmouseout,onclick info
    //a:color
    //b:tooltip鼠标放上去的文字
    //c:name网站上显示的名字
    //d:url鼠标点击之后的超连接
    //e:yAdjust 显示图片的位置调整
    function p(d,c,b,a,e)
    {
      return {url:d,name:c,message:b,color:a,yAdjust:e}
    }
    var qutos= [
p("http://www.***.com/","<font size=-1>博客</font>","I","#54a70d",[2,5]),
p("http://www.***.com/","<font size=-1>工作室</font>","LOVE","#3b79e7",[2,5]),
p("http://www.***.com/","<font size=-1>资源</font>","YOU","#96cfec",[3,7]),
p("http://www.***.com/","<font size=-1>成功案例</font>","SO","#e8d40f",[4,9]),
p("http://www.***.com/","<font size=-1>资源共享</font>","MUCH!","#ea504c",[3,7])
   ];
     /*{icon:obj,element:this.element}*/
     var cacheObjs = [];
    /*
    *
    */
    function isac(url,name)
    {
    while (name&&url != name)
    {
    name = name.parentNode;
    }
    return name==url;
    }

    /*
    * 这个是bind方法中的参数，产生事件后调用的方法
    * param:d--mouseover
    */
    var DURATION1 = 100;
    function callFunc(evet,count)
    {
        return function(eventA)
        { 
          eventA = eventA || window.event;
            var cacheObj = cacheObjs[count];
            var isMouseOver = (evet == "mouseover");
            var element = eventA.target || eventA.srcElement;//event.srcElement触发事件的元素
            var currObj = eventA.relatedTarget || (isMouseOver?eventA.fromElement:eventA.toElement);
            var h =!currObj || isac(cacheObj.element,currObj);
            var i = isac(cacheObj.element,element);
            if (isMouseOver&&!h||!isMouseOver&&(!currObj||i&&!h))
            {
                var icon = cacheObj.icon;
                icon.mouseTimeout = window.clearTimeout(icon.mouseTimeout);
                var flag = isMouseOver?1:-1;
                if(icon.flag != flag)
                {   /*这个导致active只执行一次，鼠标移入移出每一次动作切换调用一次*/
                    icon.mouseTimeout = window.setTimeout(icon.active(flag,undefined),isMouseOver?DURATION1/3:DURATION1)
                }
            }
        }
    }
    /*
    * obj 对象
    * evet 事件
    * count 长度
    */
    function bindEvent(obj,evet,count)
    {
        google.bind(obj,evet,callFunc(evet,count));
    }
    /*  页面元素的提示信息
    *   param:obj:setDivObj;Ourl:超链接;Otext:显示提示;
    */
    function show(obj,Ourl,Otext)
    {
      this.obj = obj;
      var divObj = document.createElement("div");
      var color = obj.color;
      var bgcolor = "background-color:" + color;
      var f = "width:1px;height:1px;" + "background-color:" + color + ";float:";
      var h = '<div style="height:1px;overflow:hidden">'+'<div style="'+f+'left"></div>'+'<div style="'+f+'right"></div></div>';
      var i = "margin:0 1px;height:1px;overflow:hidden;" + bgcolor;
      divObj.innerHTML = '<div style="display:none;position:absolute;top:0;left:0;z-index:2;background:#fff;cursor:pointer;cursor:hand">'
                            + '<a href="'+Ourl+'" style="color:#444;text-decoration:none" target=_blank>'/*提示信息的超链接*/
                                + '<div style="' + i + '"></div>'/*提示信息上边框*/
                                + '<div style="text-align:center;border-left:1px solid;border-right:1px solid;border-color:'+color+'">'/*提示信息左右边框*/
                                    + ''
                                    + '<div style="margin:0 auto;white-space:nowrap;padding:.2em 0 0"><font size=-1><span>'+Otext+"</span></font></div>"/*提示信息*/
                                    + h +'</div>'
                                + '<div style="'+i+'"></div>'/*提示信息下边框*/
                                + '<div style="height:4px" align="center">'
                                    + '<div style="position:relative;top:-1px;z-index:3;width:8px;overflow:hidden;margin:0 auto;height:4px;background:no-repeat -260px '+-obj.coordinates[0].y+'px"></div></div></a></div>';/*提示信息的边框下箭头*/
      this.ObjSpan = divObj.getElementsByTagName("span")[0];
      document.body.appendChild(divObj);//直接将元素的提示信息放在body下
      divObj.firstChild.firstChild.lastChild.firstChild.style.backgroundImage = "url("+PIC+")";
      this.tagA = divObj.firstChild;//提示信息的超链接
      var count = cacheObjs.length;
      cacheObjs.push({icon:obj,element:this.tagA});
      bindEvent(this.tagA,"mouseover",count);   //给超链接绑定事件
      bindEvent(this.tagA,"mouseout",count);
    }
    show.prototype.play = function(num)
    {
        var divObj = this.obj.tagA.firstChild;
        var positionA = {left:-divObj.offsetLeft,top:0};
        while (divObj)
        {
            positionA.left += divObj.offsetLeft;
            positionA.top += divObj.offsetTop;
            divObj = divObj.offsetParent;
        }
        var styleA = this.tagA.style;//这里变量styleA指向this.tagA.style，相当于缩写
        if(styleA.display == "none")
        {
            styleA.visibility = "hidden";
            styleA.display = "block";
        }
        var heightA = this.tagA.offsetHeight;
        var widthA = this.ObjSpan.offsetWidth+14;
        if (styleA.visibility == "hidden")
        {
            styleA.display = "none";
            styleA.visibility ="visible";
        }
        styleA.width = widthA + "px";
        positionA.left -= (widthA - this.obj.tagA.parentNode.offsetWidth)/2;
        positionA.top -= heightA - 3;
        positionA.top += 20*Math.pow(1 - num/this.obj.countA,3);
        styleA.left = positionA.left + "px";
        styleA.top = positionA.top + "px";
        //d--[0,1,2]
        if (num == 0||this.obj.positionA < 0)
            styleA.display = "none";
        else
        {
            styleA.display = "";
            var f = num/this.obj.countA;
            //设置提示信息的透明度，有一个渐变过程
            if("opacity" in styleA)
                styleA.opacity = f;
            else
            {
                if("MozOpacity" in styleA)
                    styleA.MozOpacity = f;
                else
                {
                    if("KhtmlOpacity" in styleA)
                        styleA.KhtmlOpacity = f;
                    else
                    {
                        if("filter" in styleA)
                            styleA.filter = "alpha(opacity=" + f*100 + ")";
                    }
                }
            }
        }
    };

//第三步：设置图片坐标和绑定事件
/*
*   param:Ocolor:颜色；tagA：超链接元素,coordinates：坐标；Ourl：超链接指向地址，Otext：页面显示的文本
*/
    function setDivObj(tagA,coordinates,Ocolor,Ourl,Otext)
    {
      this.tagA = tagA;//页面元素最外面套的超链接
      this.mouseTimeout = null;
      this.countA = coordinates.length-1;//显示的每个元素动作次数
      this.coordinates = coordinates;
      this.color = Ocolor;//颜色
      this.PicDiv = tagA.getElementsByTagName("div")[1];//页面元素的动态图片
      this.ObjShow = new show(this,Ourl,Otext);/*计算坐标和显示图片*/
      this.flag = -1;//元素的状态(-1：mouseover效果；1：mouseout效果)
      this.num = 1;//元素的动作的步骤数目
      var count = cacheObjs.length;
      /*将来要通过cacheObjs[count]找到{icon:this,element:tagA}这个对象*/
      cacheObjs.push({icon:this,element:tagA});
      bindEvent(tagA,"mouseover",count);//绑定mouseover事件
      bindEvent(tagA,"mouseout",count);//绑定mouseout事件
    }

    setDivObj.prototype.active= function(flag,num)  //使用闭包,为其他函数中settimeout反复调用产生动态效果
    {
       var obj = this;
       return function(){obj.func(flag,num)}
    };

    setDivObj.prototype.func = function(flag,num)
    {
        if (flag)     
        {
          this.flag = flag;
          this.mouseTimeout = window.clearTimeout(this.mouseTimeout);
          this.timeOut = window.clearTimeout(this.timeOut)
        }
        (typeof num != "undefined")&&(this.num = num);
        var coordinate = this.coordinates[this.num];
        /*动态图片的动态效果,变换*/
        this.PicDiv.style.backgroundPosition = -coordinate.x + "px " + -coordinate.y + "px";
        /*提示信息的动态效果,渐变*/
        this.ObjShow.play(this.num);
        /*网站名字的动态效果,变色*/
        var styleB = this.tagA.getElementsByTagName("font")[0].style;
        if (this.flag < 0)//鼠标移出,设置网站名字字体的属性
        {
            styleB.color = "black";        
            styleB.textDecoration = "none";
        }
        else//鼠标移入状态的
        {
          styleB.color = this.color;
          styleB.textDecoration = "underline";
        }
        this.num += this.flag;   
        if (this.num > this.countA)
        {
          this.num = this.countA - 1;
        }
        else if (this.num < 0)
        {
            this.num = 1;
        }
        else
        {/*这个settimetou导致active执行多次产生动态效果*/
            this.timeOut = window.setTimeout(this.active(undefined,undefined),DURATION);
        }
    };

    var WIDTH=52;
    var HEIGHT=37;
    var DURATION=75;
    /*第二步：画出静态页面,并绑定元素的事件*/
    google.index.first.push( /*first内传入函数,该函数绘制初始化页面*/
        function()
        {
            var str = '<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0"><tr>';
    for (var j = 0;j < qutos.length;++j)//循环页面的5个元素
    {
    var coordinates = [];//坐标，里面放的是left和top的值
    var topA = HEIGHT*j;
    for (var i = 0;i < 7; ++i)/*七个步骤构成一个元素的动态效果*/
    {
    if (i < 5)
        coordinates.push({x:WIDTH*i,y:topA});/*push进的为left和top*/
    else
    {  
        coordinates.push({x:WIDTH*4,y:topA-qutos[j].yAdjust[i-5]});
    }
        /*left不变了,top变化,成为最后一个效果的抖动*/
        }
    qutos[j].coordinates = coordinates;
    str +=  '<td valign=bottom style="text-align:center;padding:0 .35em 0 .4em;margin:0;cursor:pointer;cursor:hand;">'
                +'<a style="color:#444;text-decoration:none;vertical-align:bottom;" href="'+ qutos[j].url + '" target=_blank>'
                    +'<div>'
                        +'<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 '+ -topA + 'px"></div>'
                        +'<span style="white-space:nowrap">' + qutos[j].name+"</span></div></a></td>";
    };
    str += "</tr></table>";
            var ObjDiv = document.getElementById("tb");
            ObjDiv.innerHTML = str;//添加一个动态图片
            var tagsA = ObjDiv.getElementsByTagName("a");//获取超链接标签
            for(var i = 0;i < tagsA.length; ++i)
            {
              tagsA[i].firstChild.firstChild.style.backgroundImage = "url("+PIC+")";//PIC是图片的路径，全局变量
              new setDivObj(tagsA[i],qutos[i].coordinates,qutos[i].color,qutos[i].url,qutos[i].message);//设置页面元素的响应事件
            }
        }
    );
  }
)();
/*第一步：*/
google.doFirst = function()
{
  if(!google.xjs_ready)
    window.setTimeout(google.doFirst,10);
  else//如果页面的js文件加载完成了
  {
    if(google.index.first)
    /*查看first phsh操作有未完成,如果完成了就执行其内部绘图函数，该函数绘制初始化静态页面*/
    {
        for(var i = 0,draw;draw = google.index.first[i];++i)
            draw();
        delete google.index.first;//静态页面绘制完成，删除绘图缓存
    }
  }
};
google.doFirst();