标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link href="css/style.css" type="text/css" rel="stylesheet" /> 7 <link href="css/lavelamp.css" type="text/css" rel="stylesheet" /> 8 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 9 <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 10 <script type="text/javascript" src="js/jquery.easing.min.js"></script> 11 </head> 12 13 <body> 14 <div class="header"> 15 <ul class="lava_border"> 16 <li><a href="#">首页</a></li> 17 <li><a href="#">关于我们</a></li> 18 <li><a href="#">新闻中心</a></li> 19 <li><a href="#">主营业务</a></li> 20 <li><a href="#">经典案例</a></li> 21 <li><a href="#">合作与支持</a></li> 22 </ul> 23 </div> 24 <script type="text/javascript"> 25 $(function(){ 26 $(".lava_border").lavaLamp({ 27 fx:"backout", 28 speed:500, 29 }); 30 $("li").each(function(index){ 31 $(this).click(function(){ 32 $("li").removeClass("current"); 33 $("li").eq(index).addClass("current"); 34 }); 35 }); 36 }) 37 38 </script> 39 </body> 40 </html>
/* CSS Document */
/*全局样式*/
*{margin:0;padding:0;font-famliy:"微软雅黑";color:#000;font-size:14px;}
li{list-style:none;}
a{text-decoration:none;}
/*头部样式*/
.header{width:100%;height:60px;background:#e6e6e6;}
.lava_border{width:1000px;height:40px;margin:0 auto;padding:15px;position:relative;}
.lava_border li{float:left;}
.lava_border li a{float:left;padding:0 20px;position:relative;z-index:3;height:40px;}
.lava_border li a:hover{color:#F00;}
.lava_border li.back{position:absolute;z-index:2;border-bottom:3px solid #34538b;height:37px;}
.current a{color:red;}
/**
* LavaLamp - A menu plugin for jQuery with cool hover effects.
* @requires jQuery v1.1.3.1 or above
*
* http://gmarwaha.com/blog/?p=7
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 0.2.0
* Requires Jquery 1.2.1 from version 0.2.0 onwards.
* For jquery 1.1.x, use version 0.1.0 of lavalamp
*/
(function($){
$.fn.lavaLamp=function(o){
o=$.extend({
fx:"linear",
speed:500,
click:function(){}},o||{});
return this.each(function(){
var b=$(this),noop=function(){},
$back=$(‘<li class="back"><div class="left"></div></li>‘).appendTo(b),
$li=$("li",this),
curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];
$li.not(".back").hover(function(){
move(this)},noop);
$(this).hover(noop,function(){
move(curr)});
$li.click(function(e){
setCurr(this);
return o.click.apply(this,[e,this])});
setCurr(curr);
function setCurr(a){
$back.css({
"left":a.offsetLeft+"px",
"width":a.offsetWidth+"px"});
curr=a};
function move(a){
$back.each(function(){
$(this).dequeue()}).animate({
width:a.offsetWidth,
left:a.offsetLeft},
o.speed,
o.fx)}})}})(jQuery);
标签：
原文地址：http://www.cnblogs.com/xiaozhuzhuandxiaomoney/p/5604015.html
