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();