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);
时间： 2024-11-03 03:46:24