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

时间：2022-04-22 09:07:10

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

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

作者：网页模板
大小：0.01MB
点击次数：421
发布时间：2014-07-26 13:14
分享到：0

特效介绍

jQuery背景跟随鼠标移动的网页导航背景跟随鼠标移动的网页导航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代码
顶
  • 还没有评论，沙发等你来抢

社交帐号登录:

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







发布







模板网正在使用多说

























网站声明


本网站内容如果没有注明出处，所有权均归本站，提供免费下载试用，但不得用于商业盈利。如果注明出处，则来自于互联网，本站不做商业用途。如果本站有内容侵犯到您的权益，请致函站长邮箱，本站当立即删除。



E-Mail联系我们







快速链接


PSD模板


DIV+CSS模板


特效插件


源码下载


酷站欣赏


建站资源


建站教程


心境之旅


酷站提交


在线留言






网站帮助


常见问题


网站地图


如何投稿


赞助我们


客户案例


域名虚拟主机








@5imoban.net


新浪微博


网易微博


腾讯微博


QQ空间


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




我爱模板网 版权所有 皖ICP备13019395号  Copyright © 2013 5imoban.net All Rights Reserved.


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




相关文章