jQuery背景跟随鼠标移动的网页导航

浏览数：70 / 时间：2015年06月11日

当前位置：模板网首页 > 特效插件 > 导航菜单 > jQuery背景跟随鼠标移正文

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。