谷歌导航条jQuery插件
本站页头的谷歌导航条效果，使用了jQuery框架，源代码如下
<!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>谷歌导航条jQuery插件-编程设计网</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
var comm = {
Guider: { xPos: [0, -50, -100, -150, -200, -250, -300], yPos: { home: -109, intro: -220, dblog: 1, bblog: -72, design: -34, code: -145, msg: -183 }, states: {}, speed: 200, init: function () { var me = this; this.as = $('#topulGuider a'); this.as.mouseover(function () { me.animate(1, this); }).mouseout(function () { me.animate(-1, this); }); }, animate: function (dir, a) { var cls = a.className, state = this.states[cls], me = this; if (state == null) { state = { xIndex: 0, dir: 1 }; this.states[cls] = state; } if ((dir == -1 && state.xIndex > 0) || (dir == 1 && state.xIndex < this.xPos.length - 1)) { if (state.dir != dir) { if (state.timer) clearTimeout(state.timer); state.dir = dir; } state.xIndex += dir; a.firstChild.style.backgroundPosition = this.xPos[state.xIndex] + 'px ' + this.yPos[cls] + 'px'; state.timer = setTimeout(function () { me.animate(dir, a); }, this.speed / (state.xIndex + 2)); } } }
};
window.onload=function(){
comm.Guider.init();
};
</script>
<style type="text/css">
ul{margin:0px; list-style:none;padding:0px;font-size:14px;}
a{color:Black;text-decoration:none;outline:none;}
#topulGuider{width:100%;}
#topulGuider li{float:left;width:70px;height:55px;margin-top:5px;}
#topulGuider span{display:block;height:35px;background-image:url(/images/guider.gif);width:50px;margin:0px auto;}
#topulGuider a{display:block;text-align:center;font-weight:bold;}
#topulGuider a.home span{background-position:0px -109px;}
#topulGuider a.intro span{background-position:0px -220px;}
#topulGuider a.dblog span{background-position:0px 1px;}
#topulGuider a.bblog span{background-position:0px -72px;}
#topulGuider a.design span{background-position:0px -34px;}
#topulGuider a.code span{background-position:0px -145px;}
#topulGuider a.msg span{background-position:0px -183px;}
</style>
</head>
<body>
<div class="guider"><ul id="topulGuider" class="clr"><li><a href="/" class="home"><span style="background-position: 0px -109px;"></span>首页</a></li><li><a href="/dblog.aspx" class="dblog"><span></span>D博文</a></li><li><a href="/bblog.aspx" class="bblog"><span></span>B博文</a></li><li><a href="/design.aspx" class="design"><span></span>设计作品</a></li><li><a href="/code.aspx" class="code"><span></span>代码下载</a></li><li><a href="/message.aspx" class="msg"><span></span>访客留言</a></li></ul></div>
</body>
</html>
jquery框架下载：jquery-1.4.2.min.js下载
加支付宝好友偷能量挖...
原创文章，转载请注明出处：谷歌导航条jQuery插件