yiminghe
- 浏览: 1460377 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
luhouxiang：
写的很不错，学习了
Extjs 模块化动态加载js实践 -
kingkongtown：
如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
kissy editor 阶段体会 -
317966578：
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug：
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩：
怎么能让浏览器不进入 文档模式的quirks模式，进入标准的
浏览器模式与文本模式
网上搜的其他仿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"
});
分享到：
发表评论
-
continuation, cps
2013-09-12 16:49 2791起 随着 nodejs 的兴起，异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3401一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14089cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5359目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 5037最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6424css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7375promise 是 commonjs 社区中提出的异步规范，其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2829closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2916首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6447兼容性： 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3221背景 url mapping 我最早知道是作为 j ... -
tip：如何原生播放声音
2011-10-19 12:45 2977如果不想考虑浏览器间 ... -
转载：瀑布流布局浅析
2011-09-29 19:02 2845简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2846场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2268分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 7047作为前端开放的基础安全保证，caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2786html 符号解析问题 场景： 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2475这个还是很值得记下，一直存在的很大隐患终于解决，由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2306深度复制和浅度复制 是当初初学 c 遇到的第一批问题，似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3279场景： 循环依赖 我是不支持的，但现实中似乎又确实需 ...
相关推荐
"仿google导航条"项目就是针对这种设计理念的一种实现，旨在创建一个与Google首页导航菜单相似的交互效果。这个项目主要涉及前端开发中的HTML、CSS以及JavaScript技术，下面我们将详细探讨这些知识点。 首先，HTML...
强烈推荐超酷仿google导航菜单,很实用的代码，一起研究研究吧。
本资源"仿google导航菜单"就是以谷歌网站的导航菜单为蓝本，精心设计的一款菜单特效。谷歌的导航菜单以其简洁、直观的特点深受用户喜爱，因此模仿它的设计能够提升网站的专业感和用户体验。 1. **导航菜单的基本...
标题中的“不错的仿谷歌导航条源码”指的是一个模仿谷歌网站顶部导航栏的代码实现，通常包括了导航链接、下拉菜单、响应式设计等特性。这种源码可以帮助开发者快速构建具有类似谷歌风格的网站头部导航，提升用户体验...
在本文中，我们将深入探讨如何使用JavaScript来实现一个仿Google导航菜单的特效。这个特效不仅在视觉上给人留下深刻印象，还能提供用户友好的交互体验。Google的导航菜单以其简洁、直观和响应式的设计，成为了网页...
在本文中，我们将深入探讨如何实现“仿Google导航条效果”。这个效果主要涉及网页界面设计中的动态导航栏，它提供了一种用户友好的交互体验，增强了网站的视觉吸引力。Google的导航条以其简洁、高效的设计著称，是...
标题提到的"仿google的导航菜单效果"，指的是创建一个与Google网站相似的顶部导航菜单，这种菜单以其简洁、直观和高效的特性广受用户喜爱。让我们深入探讨一下这个话题。 首先，导航菜单是网页设计的核心元素之一，...
css菜单\仿Google首页导航菜单css菜单\仿Google首页导航菜单
"仿Google导航"是一个设计概念，旨在提供与Google网站相似的导航体验，这通常包括简洁、直观和响应式的元素。这样的导航条可以帮助用户轻松地浏览网站内容，提高用户满意度和交互效率。 首先，我们来了解一下导航条...
在这个项目中，JavaScript将被用来处理用户交互，如搜索框的自动完成功能，导航菜单的响应式行为，以及可能的页面动画效果。JavaScript库，如jQuery，可能会被用来简化DOM操作，而事件监听器和Ajax请求则可能用于...
### 超酷仿GOOGLE首页导航菜单效果 #### 知识点概述 本文将详细介绍一个仿照Google首页设计的导航菜单实现方案。该菜单具备动态加载、响应式设计等功能，能够为用户提供流畅且美观的浏览体验。通过分析提供的部分...
本文将详细解析"jQuery仿google导航栏\"更多\"菜单"这一主题，帮助开发者创建类似Google网站那样功能丰富的导航菜单，提升用户体验。 首先，我们需要理解Google导航栏中的"更多"菜单是如何工作的。在Google的网页...
在“仿google首页导航”中，CSS将被用来复刻Google导航栏的标志性样式，比如白色背景、蓝色链接文字、鼠标悬停时的颜色变化、以及按钮的圆角效果等。 为了实现“很漂亮的效果”，开发者可能会运用以下CSS技术： 1....
这个压缩包文件"仿Google Nexus 7网站左侧滑出导航菜单.zip"很可能包含了一个实现类似效果的HTML、CSS和JavaScript代码示例。 首先，让我们深入了解一下这种导航菜单的设计原理。侧滑导航通常通过JavaScript库如...
在仿微信导航条的场景下，`ViewPager`常用来承载各个Tab下的内容页面，用户可以通过左右滑动来切换页面。 接着，`Fragment`是Android中的一个关键概念，它代表了屏幕的一部分可独立操作和管理的UI。在微信导航条的...
仿Google导航效果超酷导航条免费放出，适合任何版本 看到好多人喜欢googel导航效果而站长又都不知道怎么制作，今天我免费送给大家一个googel导航效果。把鼠标移到导航栏目那，神奇的效果出现啦。也可以做HOME页面，...
这个"google导航条源码"包含了一些关键元素，如JavaScript、Canvas以及Prototype库，这些都是实现这种酷炫效果的基础。 首先，让我们了解一下JavaScript。JavaScript是一种广泛用于网页和应用程序的脚本语言，它...
模仿谷歌浏览器的侧边栏导航。
"Android 仿谷歌侧边栏导航源码.zip" 文件提供的正是这样一个实现，帮助开发者学习并理解如何在自己的应用中实现类似的功能。 首先，"源码说明.txt" 可能包含了关于这个项目的详细说明，包括开发环境、依赖库、使用...