仿google 导航条
网上搜的其他仿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.onmouseover=function (){
this.style.color=this.mcolor;
};
a.onmouseout=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.onmouseover=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.onmouseout=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代码
- 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的动画顺序刚好相反，利用数组排序
Js代码
- 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尝试了下，无非就是要多加几个标签。如下：
Html代码
- < 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 >
<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代码
- 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
Js代码
- 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" });