当前位置：模板网首页 > 特效插件 > 导航菜单 >  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代码
0
顶
  • 还没有评论，沙发等你来抢

社交帐号登录:







 


发布


 






模板网正在使用多说













 




 










网站声明


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


E-Mail联系我们






快速链接


PSD模板


DIV+CSS模板


特效插件


源码下载


酷站欣赏


建站资源


建站教程


心境之旅


酷站提交


在线留言






网站帮助


常见问题


网站地图


如何投稿


赞助我们


客户案例


域名虚拟主机








@5imoban.net


新浪微博


网易微博


腾讯微博


QQ空间






 


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






												


											
jQuery背景跟随鼠标移动的网页导航的更多相关文章
	

    
								
  1. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
		
    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
    
		
    2. 
						
  2. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
		
    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
    
		
    3. 
						
  3. jQuery粘性跟随滚动条滚动的导航栏源代码下载
		
    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
    
		
    4. 
						
  4. 基于jQuery鼠标悬停上下滑动导航条
		
    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...
    
		
    5. 
						
  5. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
		
    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
    
		
    6. 
						
  6. [MFC]SDI在图片背景上实现文本跟随鼠标移动
		
    SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...
    
		
    7. 
						
  7. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
		
    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
    
		
    8. 
						
  8. html页面设置一个跟随鼠标移动的DIV（jQuery实现）
		
    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
    
		
    9. 
						
  9. jQuery实现淡入淡出二级下拉导航菜单的方法
		
    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 仿制的ActivityIndicatorView
			
    仿制Github上CSS3效果制作的几个简单的ActivityIndicator,复习一下IOS动画操作. 原效果连接:https://github.com/tobiasahlin/SpinKit 代 ...
    
			
    2. 
						
  2. WINDOWS API 函数（超长，值得学习）
			
    一.隐藏和显示光标 函数: int ShowCursor ( BOOL bShow );  参数 bshow,为布尔型,bShow的值为False时隐藏光标,为True时显示光标:该函数的返回值为整型 ...
    
			
    3. 
						
  3. 强化一下，QDialog有专门的exec函数和finished信号，QWidget都没有
			
    http://blog.csdn.net/dbzhang800/article/details/6300519
    
			
    4. 
						
  4. （三）Boost库之字符串处理
			
    (三)Boost库之字符串处理 字符串处理一直是c/c++的弱项,string_algo库很好的弥补了这一点. string_algo 库算法命名规则: 前缀i    : 有这个前缀表名算法的大小写不 ...
    
			
    5. 
						
  5. （十二）boost库之多线程高级特性
			
    (十二)boost库之多线程高级特性 很多时候,线程不仅仅是执行一些耗时操作,可能我们还需要得到线程的返回值,一般的处理方法就是定义一个全局状态变量,不断轮训状态,就如我目前维护的一个项目,全局变量定 ...
    
			
    6. 
						
  6. poj 1573 Robot Motion_模拟
			
    又是被自己的方向搞混了 题意:走出去和遇到之前走过的就输出. #include <cstdlib> #include <iostream> #include<cstdio ...
    
			
    7. 
						
  7. tcp/心跳包
			
    1,http://blog.csdn.net/yuzhiyuxia/article/details/7857508 心跳包就是在客户端和服务器间定时通知对方自己状态的一个自己定义的命令字,按照一定的时 ...
    
			
    8. 
						
  8. fabric 安装及使用
			
    官网地址 1.安装 pip install fabric 依赖 Paramiko .PyCrypto库 以下依赖肯能要手动安装 #安装 pycrypto 密码库pip install pycrypto ...
    
			
    9. 
						
  9. autolisp 列表 resbuf
			
    有以下 list : (1 2 3 (4 5 6) "Properties" (("id" . 3) ("name" . "hel ...
    
			
    10. 
						
  10. WebConfig自定义节点并读取
			
    最近是遇到了一个需求,需要自定义WebConfig节点,然后进行读取,网上有很多博客,写的非常好,但是笔者在实现的过程中还是遇到了点问题,现在写一篇文章来总结下. 首先推荐大家看http://www. ...
    
			
    11.