基于jQuery实现火焰灯效果导航菜单


Posted in Javascript onJanuary 04, 2017

效果描述为:当鼠标经过某一导航选项的时候,后面的背景图片(上图“圣诞节”后圆角背景)会弹性缓动到该导航选项,如果没有发生单击动作,鼠标移开后,背景图又回到原来的位置。

您可以狠狠地点击这里:demo效果页面

使用说明:

1、需要链接的文件

需要调用的文件有:jQuery库(1.2以上版本),jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个ul li列表的样式文件。例如,本demo实例页面链接如下截图:

基于jQuery实现火焰灯效果导航菜单

2、HTML代码的写法

从jQuery代码来看,HTML只支持li列表,无序或有序列表(ol 或 ul)。例如下面的示例:

<ul class="lava_lamp">
    <li class="current"><a href="#zhangxinxu">圣诞节</a></li>
    <li><a href="#zhangxinxu">地震</a></li>
    <li><a href="#zhangxinxu">股市</a></li>
    <li><a href="#zhangxinxu">《十月围城》</a></li>
    <li><a href="#zhangxinxu">无线音乐咪咕汇</a></li>
</ul>

3、相应的CSS写法

CSS的写法与平时使用无序列表写导航条是没有太大差异的,不同在于最内部的a标签需要设置position为relative并给定一个相对较高的层级(z-index),这是显示原理(稍后讨论)决定的。还有就是需要添加一个class为back的li标签的样式,这个样式就是后面移动的背景图片(或背景色或边框等)的样式。例如,上面的HTML的CSS可以如下(大致示意):

/*下边框*/
. lava_lamp{position:relative; width:421px; height:29px; padding:15px; border:1px solid silver;}
. lava_lamp li{float:left;}
. lava_lamp li a{float:left; font-weight:bold; color:#333333; font-size:14px; top:8px; margin:auto 10px; text-decoration:none; position:relative; z-index:3;}
. lava_lamp li a:hover{text-decoration:none; color:#333333;}
. lava_lamp li.back{height:30px; border-bottom:3px solid #34538b; position:absolute; z-index:2;}

4、js部分的代码

js用法很简单。在$(function(){});之内写上$(“选择器”).lavaLamp();其实就可以了。然而一般而言,会设置一些参数。还是上面的例子:

$(". lava_lamp").lavaLamp({
 fx: "backout", //缓动类型
 speed: 700, //缓动时间
 click: function(event, menuItem) {
 return false; //单击触发事件
 }
});

这里有三个参数:fx,speed,click分别表示缓动类型,缓动执行的时间,以及单击菜单后的触发的事件。根据您的需求可以做相应的修改,例如:fx: “bounceout”,speed: 1000 。

5、完成预览

一般而言,预览就可以看到效果了。如果您在IE6下发现背景图片移动不顺畅,试试在js中加入:document.execCommand(“BackgroundImageCache”, false, true);

原理简述:

讲一下jQuery代码都做了什么工作:
jQuery首先做的事情就是在ul列表中又添加了一个class为back的li标签,在CSS中,li.back被设置为为绝对定位(position:absolute;z-index:2;),层级小于导航中a标签(position:relative;z-index:3;)的层级,所有,这里含有背景图片(或背景色或边框)的li.back标签会在文字的下方(a标签下方)显示。

jQuery做的另外一件事情就是控制li.back这个标签层的宽度以及left的位置了,也就是动画效果了。这需要结合easing缓动插件了,如果仅是单纯的移动,easing插件是不需要的,animate函数即可实现。

基于jQuery实现火焰灯效果导航菜单

您可以狠狠地点击这里:源文件打包下载(.zip 24.3k)

参考:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 #Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
jQuery操作json常用方法示例
Jan 04 #Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 #Javascript
You might like
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
python关闭windows进程的方法
2015/04/18 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python先序遍历二叉树问题
2017/11/10 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
对python的输出和输出格式详解
2018/12/08 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python 爬虫请求模块requests详解
2020/12/04 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
总务岗位职责
2013/11/19 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
土木工程专业推荐信
2014/02/19 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android