仿google 导航条

于 2008-11-13 18:00:57 发布
阅读量152 收藏
点赞数
分类专栏： javascript 文章标签： Google CSS JavaScript Flash IE ViewUI

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google nav</title>
<style type="text/css" >
#g_ul{ 
	margin:0;
	padding:0;
	float:left;
	}

.g_nav {
	font-size:12px;
height:55px;
margin:20px;
padding-top:30px;
position:relative;
text-align:center;
text-indent:0;
}
.g_nav div.detail {
background:#FFFFFF none repeat scroll 0 0;
left:-10px;
line-height:12px;
padding:9px 10px;
position:absolute;
top:10px;
white-space:nowrap;
}
#g_ul li{
list-style:none;
float:left;
margin:15px 0px;
padding:0;
width:50px;
height:37px;
background:url("toolbar_animation_20080807.png") no-repeat;
cursor:pointer;
}
#g_ul a{
float:left;
padding:48px 0 0;
width:50px;
margin:0;
color:#444444;
font:12px/22px "宋体";
text-align:center;
white-space:nowrap;
text-decoration:none;
}
#g_ul a:hover{

text-decoration:underline;
/*text-decoration:none;
color:#f00;
*/
}
#g_ul em.new{
color:#f00;
font:10px "宋体";
vertical-align:top;
}

.g_nav canvas {
left:0;
position:absolute;
top:0;
}

</style>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
	<!--
	<img src="toolbar_animation_20080807.png" />
-->
<div class="g_nav">
<ul id="g_ul">
  <li><a href="javascript:;" title="搜索热门网络视频">视频</a></li>      
  <li><a href="javascript:;" title="搜索全球的图片">图片</a></li>
  <li><a href="javascript:;" title="搜索您身边的分类生活信息">生活<em class="new">新!</em></a></li>
  <li><a href="javascript:;" title="查询地址、搜索周边和规划线路">地图</a></li>
  <li><a href="javascript:;" title="商业信息、财经新闻、实时股价和动态图表">财经</a></li>
  <li><a href="javascript:;" title="查看分类热门搜索排行">热榜</a></li>
  <li><a href="javascript:;" title="网址大全、快速直达分常用网站">网站导航</a></li>
</ul>

</div>

<script type="text/javascript">

	
	var onloadFunc=function () {

var getDimensions = function(element) {
   
    var display = (element).style.display;
    if (display != 'none' && display != null) // Safari bug
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
  }
function draw_m(canvas,color){
		
			var context = canvas.getContext("2d");
			var width=canvas.width;
			var height2=canvas.height-4.5;
			var height=canvas.height;
			context.beginPath();
			context.strokeStyle = color;
			context.moveTo(0.5,0.5+5);
			context.arc(5.5,5.5,5,-Math.PI,-Math.PI/2,false);
			context.lineTo(width-0.5-5,0.5);
			context.arc(width-0.5-5,5.5,5,-Math.PI/2,0,false);
			context.lineTo(width-0.5,height2-5);
			context.arc(width-0.5-5,height2-5,5,0,Math.PI/2,false);
			context.lineTo(width/2+3,height2);
			context.lineTo(width/2,height);
			context.lineTo(width/2-3,height2);
			context.lineTo(0.5+5,height2);
			context.arc(0.5+5,height2-5,5,Math.PI/2,Math.PI,false);
			context.lineTo(0.5,0.5+5);
			context.stroke();
		}	
		
		
		
		
var COLORS= ["#FFB100","#DD0B0A","#FD0011","#DD0B0A","#14A643","#A37FBD","#3F9CE2"]	;		

	
	
// IE缓存图像
try{
 document.execCommand("BackgroundImageCache", false, true);
}
catch(e){
}

var li=document.getElementById("g_ul").getElementsByTagName("li");
function totalWidth(p) {
	var c=p.childNodes;
	var cw=0;
	for(var i=0;i<c.length;i++)
			cw+=c[i].width;
	return cw;		
}
var divParent=document.getElementById("g_ul").parentNode;
for(var i=0, l=li.length; i<l; i++){
	var lii=li[i];
	
	
	var a= lii.getElementsByTagName("a")[0];
	a.mcolor=COLORS[i];
	a.οnmοuseοver=function (){
				this.style.color=this.mcolor;
	};
	
	a.οnmοuseοut=function (){
		this.style.color='#444444';
	};
	
	var detail=document.createElement('div');
	detail.appendChild(document.createTextNode(a.title));
	a.removeAttribute('title');
	detail.className='detail';
	detail.style.display='none';
	//detail.style.opacity=0;
	//alert(detail.style.opacity);
	//detail.style.opacity=1;
	//alert(detail.style.opacity);
	divParent.appendChild(detail);
	var dim=getDimensions(detail);
	detail.style.left=24.5+50*(i)-dim.width/2+'px';
	var canvas=document.createElement('canvas');
	canvas.width=dim.width;
	canvas.height=dim.height;
	detail.appendChild(canvas);
	if(window['G_vmlCanvasManager'] ) {
					G_vmlCanvasManager.initElement(canvas);
					
				}
	draw_m(detail.lastChild,COLORS[i]);
	
	
	lii.style.backgroundPosition="0px "+(i*-37)+"px";
	lii.detail=detail;
	lii.οnmοuseοver=function(){
		if(this.intervalId){
		 this.intervalId=clearInterval(this.intervalId);
	   this.intervalId=null;
	   //return;
	   }
	
	this.intervalId=setInterval( 
		(function(o,out) {
			return function(){
				flash.call(o,out)
				}
			})(this,false), 100);
			
			};
	
	
	lii.οnmοuseοut=function(){
		
		if(this.intervalId){
		 this.intervalId=clearInterval(this.intervalId);
	   this.intervalId=null;
	   //return;
	   }
	
		this.intervalId=setInterval( 
		(function(o,out) {
			return function(){
				flash.call(o,out)
				}
			})(this,true), 100);
	};



}

function flash(out){
	var ts=this.style;
	var str=ts.backgroundPosition;
	var re=/(-?\d+)px\s+(-?\d+)px/;
	var pxs=str.match(re);
	if(pxs){
		//console.log('before flash   '+  pxs[1] +'  '+pxs[2]);
	
	}
var step=-52;
if(out) {
	step=52;
	if(this.detail.style.display=='') {
			ease(this.detail,true);
			//this.detail.style.display='none';
		}
}
	pxs[1]=parseInt(pxs[1])+step;
		if(pxs[1]< -208 || pxs[1] > 0){
			this.intervalId=clearInterval(this.intervalId);
			this.intervalId=null;
			return;
		}
	ts.backgroundPosition=pxs[1]+'px '+pxs[2]+'px';
	//console.log('after flash   '+  pxs[1] +'  '+pxs[2]);
	
	if(pxs[1]==-208) {
		if(this.detail.style.display=='none'){
			ease(this.detail,false);
			//this.detail.style.display='';
		}
	}

}



function ease(el,out) {
	//return;
el.style.opacity=el.style.opacity || 0;
	var x=setInterval(function (){
		if(el.style.opacity<0) {
			x=clearInterval(x);
			el.style.opacity=0;
			el.style.display='none';
			return;
		}
		
		if(el.style.opacity>1) {
			x=clearInterval(x);
			el.style.opacity=1;
			el.style.display='';
			return;
		}
		var step=-0.25;
		if(!out)
			step=0.25;
			//console.log('before  '+el.style.opacity);
			
		el.style.opacity=parseFloat(el.style.opacity)+step;
	//console.log('after  '+el.style.opacity);
	},40);

}
};

	if(window.attachEvent){
window.attachEvent('onload',onloadFunc);}
	else{
	window.addEventListener('load',onloadFunc,false);}
</script>
</body>
</html>

 

 

ps:

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

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

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

难点就在切图和定位上。


下面讲一下这两个难点。

切图 ：

a ：

 

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

 

Js代码 复制代码
  1. for ( var  i=0; i<5; i++){  
  2.             setTimeout("navScrollBg("  + i +  ","  + index + "," +flag+ ")" ,40 * i);    
  3.         }   
for(var i=0; i<5; i++){
			setTimeout("navScrollBg(" + i + "," + index +","+flag+")",40 * i);  
		}
 

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

 

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

 

Js代码 复制代码
  1. var  a=[0,52,104,156,208];     
  2.         var  spans = $( "#info_"  + index).find( "span" );  
  3.         if (flag == 0){  
  4.             spans.css("background-position" ,(0 - a[i]) +  "px"  +  " "  + (0-((index-1)*37)) + "px" );              
  5.         }  
  6.         else {  
  7.             a.sort(function (b,c){ return  c-b;});           
  8.             spans.css("background-position" ,(0 - a[i]) +  "px"  +  " "  + (0-((index-1)*37)) + "px" );  
  9.         }   
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尝试了下，无非就是要多加几个标签。如下：

Html代码 复制代码
  1. < style   type = "text/css" >   
  2. div.text{text-align:center;position:absolute;left:0;top:0;cursor:pointer;display:none;}  
  3. div.text div.border{white-space:nowrap;padding:2px;line-height:14px;display:block;_padding-top:4px;}  
  4. div.text div.leftright{height:1px;overflow:hidden;clear:both;}  
  5. div.text div.leftright .left{width:1px;height:1px;float:left;}  
  6. div.text div.leftright .right{width:1px;height:1px;float:right;}  
  7. div.text div.topline{margin:0 1px;height:1px;overflow:hidden;}  
  8. 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;}  
  9.   
  10. div.text1 div.border{border-left:1px solid #54a70d;border-right:1px solid #54a70d;}  
  11. div.text1 div.leftright .left{background-color:#54a70d;}  
  12. div.text1 div.leftright .right{background-color:#54a70d;}  
  13. div.text1 div.topline{background-color:#54a70d;}  
  14. div.text1 div.arrow{background-position:-260px 0;}  
  15. </ style >   
  16. < div   class = "text text1" >   
  17.     < div   class = "topline" > </ div >   
  18.     < div   class = "leftright" >   
  19.         < div   class = "left" > </ div >   
  20.         < div   class = "right" > </ div >   
  21.     </ div >   
  22.     < div   class = "border" >   
  23.         < span > 搜索热门网络视频 </ span >   
  24.     </ div >   
  25.     < div   class = "leftright" >   
  26.         < div   class = "left" > </ div >   
  27.         < div   class = "right" > </ div >   
  28.     </ div >   
  29.     < div   class = "topline" > </ div >   
  30.     < div   class = "arrow" > </ div >   
  31. </ div >    
<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的宽度都会动态的获取。

 

Js代码 复制代码
  1. var  textWidth = $( "div.text" +index).show().find( "span" ).width() + 14;  
  2. $("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

 

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

 

 

iteye_4865
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值