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

• 首页
• PSD模板
• CSS模板
• 特效插件
• 源码下载
• 酷站欣赏
• 建站资源
• 建站教程
• 心境之旅
• 在线留言

• 设为首页
• 加入收藏
• 我要投稿
• 联系站长
• 

Search

 

 

• 首页
• PSD模板
• CSS模板
• 特效插件
• 源码下载
• 酷站欣赏
• 建站资源
• 建站教程
• 心境之旅
• 在线留言

 

• 滚动图片
• 广告特效
• 选项卡特效
• 鼠标特效
• 表单按钮
• 表格图层
• 窗口特效
• 文字特效
• 色彩特效
• 图像特效
• 日期特效
• 导航菜单
• 在线客服

 

 

 

当前位置：模板网首页 > 特效插件 > 导航菜单 >  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。

• 本文标签：
• 网页导航jQuery代码

jQuery背景跟随鼠标移动的网页导航效果预览jQuery背景跟随鼠标移动的网页导航本地下载

0

0

顶

最新最早最热

• 0条评论

• 还没有评论，沙发等你来抢

社交帐号登录:

• 微博
• QQ
• 人人
• 豆瓣
• 更多»

 

发布

 

模板网正在使用多说

• 热门网页特效

  • HTML5+css3制作的超酷3D照片
  • jQuery粘性跟随滚动条滚动
  • HTML5+jQuery打造漂亮的爱心
  • 四种jQuery+bootstrap分页效果
  • 简单的div+css+js导航带下拉
  • 纯css3打造能够弹起和按下
  • JS日期选择插件 WdatePicke
  • 相册图片放大查看弹出层
  • cQuery仿携程网带日期和节
  • 兼容火狐和IE的windows med

   

• 热门PSD模板

• 热门CSS模板

• 热门网站源码

• 热门酷站欣赏

• 热门建站资源

• 热门建站教程

• 热门文章

 

 

jQuery动态背景的导航栏代码

xp风格和QQ风格可折叠的侧边栏

网站声明

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

E-Mail联系我们

快速链接

PSD模板

DIV+CSS模板

特效插件

源码下载

酷站欣赏

建站资源

建站教程

心境之旅

酷站提交

在线留言

网站帮助

常见问题

网站地图

如何投稿

赞助我们

客户案例

域名虚拟主机

@5imoban.net

新浪微博

网易微博

腾讯微博

QQ空间

 

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