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代码
热门网页特效
热门PSD模板
热门CSS模板
热门网站源码
热门酷站欣赏
热门建站资源
热门建站教程
热门文章
- 网站声明
- 本网站内容如果没有注明出处，所有权均归本站，提供免费下载试用，但不得用于商业盈利。如果注明出处，则来自于互联网，本站不做商业用途。如果本站有内容侵犯到您的权益，请致函站长邮箱，本站当立即删除。
- E-Mail联系我们
我爱模板网 版权所有 皖ICP备13019395号 Copyright © 2013 5imoban.net All Rights Reserved.
jQuery背景跟随鼠标移动的网页导航的更多相关文章
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- [MFC]SDI在图片背景上实现文本跟随鼠标移动
SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- html页面设置一个跟随鼠标移动的DIV（jQuery实现）
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
随机推荐
- delphi 修改代码补全的快捷键(由Ctrl+Space 改为 Ctrl + alt + Space)（通过修改OpenTool生效）
delphi 的IDE快捷键与输入法切换键中突,以往的解决方法是下载一个ImeTool修改 windows 系统的快捷键 在 xp win7 都好使,但在win 10经常是修改完后,重启又失效了. 本 ...
- Inno Setup：获取isl中的多国语言字串
原文 http://zwkufo.blog.163.com/blog/static/25882512010101041626803/?suggestedreading&wumii 用InnoS ...
- boost库的安装,使用,介绍,库分类
1)首先去官网下载boost源码安装包:http://www.boost.org/ 选择下载对应的boost源码包.本次下载使用的是 boost_1_60_0.tar.gz (2)解压文件:tar - ...
- cf468A 24 Game
A. 24 Game time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- .NET设计模式系列文章
原文地址:http://terrylee.cnblogs.com/archive/2006/06/01/334911.html 最初写探索设计模式系列的时候,我只是想把它作为自己学习设计模式的读书笔记 ...
- poj 1603 Risk_spfa向前星
poj终于到100题,贴个代码纪念一下,hdu 到400题再贴 题意:有20个城市,接下来有19行告诉你,i城市与n个城市相连,图是双向的,然后叫你求x到y的最小经过几个城市 #include < ...
- android笔记1——开发环境的搭建
Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...
- mysql基础：mysql与C结合实例
一个简单的mysql与C的交互,使用了一些mysql的C API! 老鸟掠过,新手能够看看! /****************************************** 本文件学习mysq ...
- 卓尼斯ZT-180评測
卓尼斯ZT-180评測 ——正在出差途中,用10”上网本发帖,没有拍照,且写得冲忙,不妥之处见谅. 一.採购 1.因外出旅游,不想带那台14"笔记本,所以想买一台平板电脑.当时,选择的 ...
- Android开发环境的搭建之（四）虚拟设备AVD的基本配置
配置Android系统语言包为中文简体.点击导航栏左数第二个“菜单”图标 选择“System settings”. 选择“Language & Input” 选择“Language” 选择“中 ...