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尝试了下,无非就是要多加几个标签。如下:


搜索热门网络视频

 这里我提了个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

你可能感兴趣的:(jquery)