google首页动画效果

原本以为google首页的动画是动画图片，后来发现是用js写的。

好奇，就仿着google首页的动画用jquery试着写了个。

难点就在切图和定位上。

 

下面讲一下这两个难点。

切图 ：

a ：

 

这里我拉了些参考线，便于看得更清楚些。每个方框里的宽度高度都相同。然后用setTimeout延时，间隔相等的时间去改变背景图片的位置，连贯起来看起来就像是个小flash动画

 

for(var i=0; i<5; i++){
			setTimeout("navScrollBg(" + i + "," + index +","+flag+")",40 * i);  
		}

 

这里的i<5是看这个动画有几步，如上图是5步。

 

b ：mourseover和mourseout的动画顺序刚好相反，利用数组排序

 

var a=[0,52,104,156,208];	
		var spans = $("#info_" + index).find("span");
		if(flag == 0){
			spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");			
		}
		else{
			a.sort(function(b,c){return c-b;});			
			spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");
		}

 当flag=0，var a=[0,52,104,156,208];

 当flag=1，var a=[208,156,104,52,0];

 

定位 ：

对于（上图）icon上方的文字描述的圆角背景框

1.如果圆角框做成背景图就没什么难的

2.如果用css写个圆角框，还是个比较新鲜的尝试（平时做圆角框都是切图的，因为切图简单些）。

google首页的圆角框是用css写的，为了练一下技术，我也用css尝试了下，无非就是要多加几个标签。如下：

<style type="text/css">
div.text{text-align:center;position:absolute;left:0;top:0;cursor:pointer;display:none;}
div.text div.border{white-space:nowrap;padding:2px;line-height:14px;display:block;_padding-top:4px;}
div.text div.leftright{height:1px;overflow:hidden;clear:both;}
div.text div.leftright .left{width:1px;height:1px;float:left;margin-left:1px;}
div.text div.leftright .right{width:1px;height:1px;float:right;margin-right:1px;}
div.text div.topline{margin:0 2px;height:1px;overflow:hidden;}
div.text div.arrow{background:url(images/google_icons.jpg) no-repeat -260px 0;width:8px;height:4px;margin:0 auto;position:relative;top:-1px;overflow:hidden;}

div.text1 div.border{border-left:1px solid #54a70d;border-right:1px solid #54a70d;}
div.text1 div.leftright .left{background-color:#54a70d;}
div.text1 div.leftright .right{background-color:#54a70d;}
div.text1 div.topline{background-color:#54a70d;}
div.text1 div.arrow{background-position:-260px 0;}
</style>
<div class="text text1">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>搜索热门网络视频</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

 这里我提了个text公用样式出来了，text1,text2....只是加了不同的颜色，代码上精减了不少。

 

对于icon上方的文字描述的定位，我必须始终让它的中心和icon的中心在一条垂直直线上。

 

a 那么首先我要对包文字描述的div（以下简称div）绝对定位。

 

b 然后取到div内包文字描述的span的宽度，加上左右的padding值（例子中取的值是10px），赋给div的宽度（以下简称textWidth）。

这样不管我文字描述有多长，div的宽度都会动态的获取。

 

var textWidth = $("div.text"+index).show().find("span").width() + 14;
$("div.text"+index).width(textWidth);

 

c 最后用getBoundingClientRect()取到包icon和标签的a（以下简称a）在浏览器中距左上角的left（以下简称elementLeft）和top（以下简称elementTop）值；

div绝对定位的   top值：elementTop-适当值;

                       left值：elementLeft+icon宽度-div的宽度/2

 

var elementLeft = $("li#info_" +index +" a").get(0).getBoundingClientRect().left; 
var elementTop = $("li#info_" +index +" a").get(0).getBoundingClientRect().top;
var textLeft = elementLeft + 24 - parseInt(textWidth) / 2;
var textTop = elementTop - 32;
$("div.text"+index).css({"left":textLeft+"px","top":textTop+"px"});

 

c(补充+纠正) :

今天重新看了下，发现getBoundingClientRect()方法不兼容chrome浏览器，稍作些修改，就是用jquery的offset()方法代替了getBoundingClientRect()，并把jquery更新到了1.3，修改版是兼容chrome的

 

var elementLeft = $("li#info_" +index +" a").offset().left;
var elementTop = $("li#info_" +index +" a").offset().top;
var textLeft = elementLeft + 26 - parseInt(textWidth) / 2;
var textTop = elementTop - 32;
$("div.text"+index).css({"left":textLeft+"px","top":textTop+"px"});

 这里的"26“是icon宽度/2，即52/2 所以:

                       top值：elementTop-适当值;

                       left值：elementLeft+icon宽度/2-div的宽度/2

评论

77 楼 shanfeng1 2009-09-07  

呵呵，那属于去年的研究成果了。不过楼主有心！

76 楼 mx122723 2009-07-30  

正需要这个代码呢

75 楼 Reideal 2009-07-01  

很不错的东西，最近对这个有兴趣，谢谢

74 楼 youjianbo_han_87 2009-06-30  

做得不是很对哦，google感觉像 YUI里面 动画弹跳一样，你的只会出来，不会有果冻效果

73 楼 ice-cream 2009-02-13  

ryofeng 写道

div绝对定位的&nbsp;&nbsp; top值：elementTop-适当值;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left值：elementLeft+icon宽度-div的宽度/2

left值感觉应该是： elementLeft+icon宽度/-div的宽度/2,改了好像不对，不知道为什么？

我已经做了修正，demo中的26已经是icon宽度/2。

72 楼 expet 2009-02-12  

学习学习好东西

71 楼 ryofeng 2009-02-12  

div绝对定位的   top值：elementTop-适当值;
              left值：elementLeft+icon宽度-div的宽度/2

left值感觉应该是： elementLeft+icon宽度/2-div的宽度/2,改了好像不对，不知道为什么？

70 楼 fly_to_the_winds 2009-02-01  

看看，学习

69 楼 freedomstyle 2009-01-31  

   谁说不显示啊，你试过没有呢？？我一直用Firefox都显示蛮好的呢！！楼主很强大啊！！

68 楼 ybbid 2009-01-24  

多谢,好东西.

67 楼 yiluxiangbei 2009-01-21  

不错不错，可以借鉴来学习下

66 楼 dalian_ufo 2009-01-12  

先下载下来看看，thanks

65 楼 fighter-to 2009-01-10  

很好啊，在ff没问题，测试完毕

64 楼 etao528 2009-01-06  

非常感谢，我也在试着做。

63 楼 ice-cream 2009-01-03  

hanjs 写道

谁能给讲讲css构造圆角矩形的原理呢？

看看这张图你应该就会明白了，就是用几个div，填充背景色，组合起来的

62 楼 hanjs 2009-01-02  

lz真是厉害啊，看到了好的东西就自己研究再动手实践，佩服。谁能给讲讲css构造圆角矩形的原理呢？

原理可以看这个帖子，说的很明白 http://www.cnblogs.com/NewLand/archive/2008/03/03/838713.html

还有一点lz注意没有啊，就是google的鼠标可以从图片移动到提示框中再点击链接。

61 楼 脑袋雷劈的 2008-12-25  

笨笨狗 写道

tjc 写道

我很想把这个功能抽象一下，就是它的链接个数会动态改变，随机的，而不是这样写死了的，无奈啊 .....我得修炼修炼去....

囧，我的那个实现就是灵活的，完全能满足你的要求，动态增减，只要你有合适的背景图。但是怎么没人关注下呢，囧……

你可以去我的blog看看：）

楼上不要再念了啊，我就去看了，很赞的说！
的确是跨浏览器的，我用的opera看的，效果也非常棒，今天晚上打算花一晚上的时间 ，先简单的研究一下，不懂的地方再给你留言哈！！

60 楼 笨笨狗 2008-12-24  

tjc 写道

我很想把这个功能抽象一下，就是它的链接个数会动态改变，随机的，而不是这样写死了的，无奈啊 .....我得修炼修炼去....

囧，我的那个实现就是灵活的，完全能满足你的要求，动态增减，只要你有合适的背景图。但是怎么没人关注下呢，囧……

你可以去我的blog看看：）

59 楼 chyichin 2008-12-23  

ccxw1983 写道

你的代码简单易懂，做得不错。
google真是乱搞，这么简单的功能写那么多代码。

嗯 GOOOOD,和我一样喜欢简单，喜欢将多余的东西剔除呵呵

58 楼 chyichin 2008-12-23  

很不错
主要是那个sort呵呵 有意思  如果我做可能是两个数组了