基于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 相关文章推荐
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
深入PHP curl参数的详解
2013/06/17 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
使用cx_freeze把python打包exe示例
2014/01/24 Python
Django发送html邮件的方法
2015/05/26 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
大学校运会广播稿
2014/02/03 职场文书
节约用水标语
2014/06/11 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
个人自荐书范文
2015/03/09 职场文书
求职自我评价参考范文
2019/05/16 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android