仿google 导航条

网上搜的其他仿google导航条，要么引用其他基础库，要么代码根本没法看，就自己简单写了下(借鉴了他人一点代码：）) ，google 是用 div 来 实现提示框的边线表示，觉得这样太麻烦了，我参照 [scriptfans ] 引入了 excanvas 来实现画图，其他都自己写了，也抄了点基础库，当然和google还是有点差距，那个提示框没有从底向上移的效果，其他都差不多了，有空再封装整理一下，先贴出来

 

	


  
视频
      
  
图片
  
生活新!
  
地图
  
财经
  
热榜
  
网站导航






 

 

 

ps:

方法二：代码比较少，html,css比较多了 http://www.iteye.com/topic/286946?page=1

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

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

难点就在切图和定位上。

下面讲一下这两个难点。

切图 ：

a ：

 

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

 

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

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" );
         }

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;}
 div.text div.leftright .right{width:1px;height:1px;float:right;}
 div.text div.topline{margin:0 1px;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);

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" });