betway必威-betway必威官方网站
做最好的网站

【betway必威】借助插件Lavalamp实现导航条动态美化

---------tabs.js----------------- 复制代码 代码如下: ${ //init seleted tab var on= $.cookie; if { $.addClass.removeClass(); } //default tab else { $.cookie; } //change tab $.click{ var current_tab = $.index; $.cookie('current_tab', current_tab); window.location = $; }); }) ---------------css.css---------------------- 复制代码 代码如下: .nav { overflow:hidden; height:20px;} .nav li { float:left; display:inline; padding:3px;} .nav li a:hover { color:yellow; } .nav li.on { background:#900; color:#FFF;} .nav li.on a { color:#fff; } .nav li.on a:hover { color:yellow; } a { text-decoration:none; } --------------------- ----------------------------------- 复制代码 代码如下:

借助 插件 Lavalamp实现导航条动态显示效果, 以前用animate来实现,效果不是很好

无标题文档

复制代码 代码如下:

  • 第一页
  • 第二页
  • 第三页

<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.lavalamp.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".nav").lavaLamp({
fx: "backout",
speed: 1100,
mouseover:function(event, menuItem){alert();}
});
});

其它两个页面一样,文件改一下可以了 Mark Dzone 夜猫人来自:

</script>

<style>

.nav {
width:650px;
height:100px;
float:left;
position: relative;
}
.nav li {
width:auto;
min-width:40px;
line-height:100px;
padding:0 15px;
margin:0 10px 0 0;
color:#000;
font-size:14px;
text-align:center;
float:left;
}
.nav li.back {
background: #86bf40;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
line-height: 2;
width: 40px;
height: 100px; /*----*/
z-index: 1; /*----*/
position: absolute; /*----*/
margin-top: 0px;
margin-left:5px;
}
.nav li a {
color: #000;
z-index: 2; /*----*/
font-variant: small-caps;
text-decoration: none;
position: relative; /*----*/
margin: auto 10px;
}

</style>
</head>

<body>
<!-- header -->
<div class="headerbox">
<div class="header"> <a href="" class="logo"><img src="images/logo.png" alt="优速云" /></a>
<ul class="nav">
<li class="current"><a href="#">首 页</a></li>
<li class="1"><a href="#">个人版</a></li>
<li class="2"><a href="#">中小版</a></li>
<li class="3"><a href="#">企业版</a></li>
<li class="4"><a href="#">服务与价格</a></li>
<li class="5"><a href="#">关于我们</a></li>
</a>
</ul>
<div class="login"> <a href="" class="icon_login">登 录</a> <a href="" class="icon_login">注 册</a> </div>
</div>
</div>

</body>

</html>

//// ------lavalamp.js文件修改--------------

复制代码 代码如下:

本文由betway必威发布于网络技术,转载请注明出处:【betway必威】借助插件Lavalamp实现导航条动态美化

TAG标签: betway必威
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。