基于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插件制作教程 txtHover
Aug 17 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
BootStrap中的表单大全
Sep 07 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
vue debug 二种方法
Sep 16 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 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中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
Python实现大文件排序的方法
2015/07/10 Python
Python解析json文件相关知识学习
2016/03/01 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python进行统计建模
2020/08/10 Python
python3中布局背景颜色代码分析
2020/12/01 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
实习生自我鉴定范文
2013/12/05 职场文书
水电工岗位职责
2014/02/12 职场文书
暑期社会实践感言
2014/02/25 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python