基于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 相关文章推荐
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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初学者最感迷茫的问题小结
2010/03/27 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
jQuery技巧总结
2011/01/01 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
js选项卡的制作方法
2017/01/23 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python实现微信表情包炸群功能
2021/01/28 Python
怎样声明接口
2014/09/19 面试题
公司行政经理岗位职责
2013/12/24 职场文书
会计系毕业生求职信
2014/05/28 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
刘公岛导游词
2015/02/05 职场文书
写给女朋友的保证书
2015/05/09 职场文书
教师节座谈会主持词
2015/07/03 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书