jQuery背景跟随鼠标移动的网页导航
- 作者：网页模板
- 大小：0.01MB
- 点击次数：421
- 发布时间：2014-07-26 13:14
-
分享到：0
特效介绍
背景跟随鼠标移动的网页导航jQuery代码，导航的背景会跟着鼠标移动，并会动态的左右晃动，渐渐停止。
使用方法
1、JS代码：
01 |
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
|
02 |
<script type="text/javascript" src="js/jquery.plugins.js"></script>
|
03 |
<script type="text/javascript">
|
04 |
$(function() {
|
05 |
$(".meun").lavaLamp({
|
06 |
fx: "backout",
|
07 |
speed: 700,
|
08 |
click: function(event, menuItem) {
|
09 |
return true;
|
10 |
}
|
11 |
});
|
12 |
}); |
13 |
</script> |
14 |
<!--[if lt IE 7]>
|
15 |
<style type="text/css">
|
16 |
.meun_bg{background:none!important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image87.png',sizingMethod='crop')}
|
17 |
</style> |
18 |
<![endif]--> |
2、CSS代码：
01 |
<style type="text/css">
|
02 |
*{margin:0;padding:0;list-style-type:none;}
|
03 |
a,img{border:0;}
|
04 |
/* meun */ |
05 |
.meun{position:relative;height:68px;width:967px;padding-left:13px;background:url(images/meun_bg.png) no-repeat 0 8px;overflow:hidden;margin:40px auto;}
|
06 |
.meun_bg{ position:absolute;top:0px;left:0px;background:url(images/image87.png) no-repeat;height:8px;width:980px;overflow:hidden;}
|
07 |
.meun li{float:left;}
|
08 |
.meun li.back{background:url(images/meun_tab.png) no-repeat;padding-left:8px;height:68px;overflow:hidden;z-index:8;position:absolute;}
|
09 |
.meun li.back .left{background:url(images/meun_tab.png) no-repeat right0;height:68px;float:right;width:8px;}
|
10 |
.meun li.back .arrow{float:left;width:92%;height:68px;position:relative;}
|
11 |
.meun li.back .arrow .icon{position:absolute;top:56px;left:45%;background:url(images/arrow.gif) no-repeat;height:5px;width:9px;overflow:hidden;}
|
12 |
.meun li a{ font-family:"微软雅黑","黑体";text-decoration:none;color:#fff;font-size:18px;z-index:10;display:block;float:left;position:relative;overflow:hidden;padding:25px33px 0;height:43px;}
|
13 |
.meun li a span{cursor:pointer;}
|
14 |
</style> |
3、HTML代码：
01 |
<div class="meun">
|
02 |
<div class="meun_bg"></div>
|
03 |
<ul>
|
04 |
<li><a href="http://www.5imoban.net/"><span>首页</span></a></li>
|
05 |
<li><a href="http://www.5imoban.net/"><span>jquery 特效</span></a></li>
|
06 |
<li><a href="http://www.5imoban.net/"><span>javascript特效</span></a></li>
|
07 |
<li class="current"><a href="http://www.5imoban.net/"><span>网页模板</span></a></li>
|
08 |
<li><a href="http://www.5imoban.net/"><span>div+css教程</span></a></li>
|
09 |
<li><a href="http://www.5imoban.net/"><span>html5教程</span></a></li>
|
10 |
</ul>
|
11 |
</div>
|
注：<li class="current">表示当前背景在哪里。例如，如果在首页，请在首页的li添加样式current。
- 本文标签：
- 网页导航jQuery代码
顶
-
热门网页特效
热门PSD模板
热门CSS模板
热门网站源码
热门酷站欣赏
热门建站资源
热门建站教程
热门文章
- 网站声明
- 本网站内容如果没有注明出处，所有权均归本站，提供免费下载试用，但不得用于商业盈利。如果注明出处，则来自于互联网，本站不做商业用途。如果本站有内容侵犯到您的权益，请致函站长邮箱，本站当立即删除。
- E-Mail联系我们
我爱模板网 版权所有 皖ICP备13019395号 Copyright © 2013 5imoban.net All Rights Reserved.