基于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 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 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简单提示框alert封装函数
2010/08/08 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
详解PHP队列的实现
2019/03/14 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JS 统计时间
2021/03/09 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python导入时小括号大作用
2017/01/10 Python
python 计算文件的md5值实例
2017/01/13 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
如何查找网页漏洞
2016/06/22 面试题
财务管理专业推荐信
2013/11/19 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
家长建议怎么写
2014/05/15 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL