基于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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
JS实现瀑布流布局
Oct 21 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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
正则表达式语法
2006/10/09 Javascript
php访问查询mysql数据的三种方法
2006/10/09 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
javascript中new关键字详解
2015/12/14 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
python标准算法实现数组全排列的方法
2015/03/17 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python简单实现获取当前时间
2016/08/27 Python
python3 flask实现文件上传功能
2020/03/20 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python线程的几种创建方式详解
2019/08/29 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
2014年保密工作总结
2014/11/22 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书