最近将以前分析的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();
