jquery火焰等效果导航菜单
jQuery-火焰灯效果导航菜单
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=450
效果描述为:当鼠标经过某一导航选项的时候,后面的背景图片(上图“圣诞节”后圆角背景)会弹性缓动到该导航选项,如果没有发生单击动作,鼠标移开后,背景图又回到原来的位置。
您可以狠狠地点击这里:demo效果页面
使用说明:
1、需要链接的文件
需要调用的文件有:jQuery库(1.2以上版本),jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个ul li列表的样式文件。例如,本demo实例页面链接如下截图:
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函数即可实现。
您可以狠狠地点击这里:源文件打包下载(.zip 24.3k)(在本人博客园的文件里也可以下载)
参考自:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=450
jquery火焰等效果导航菜单的更多相关文章
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQUERY 插件开发——MENU(导航菜单)
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- 如何用CSS和jQuery实现一个侧滑导航菜单
为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- jquery 实现两级导航菜单
主要用于运维系统, 对界面要求不高的场合. 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1. HTML 页面及 JS 交互, 注意引入 Jquery ...
- jquery倾斜的动画导航菜单
1. [代码]完整源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Jquery列表中的导航菜单的应用
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用jquery实现百度新闻导航菜单滑动动画
前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
随机推荐
- 利用Openvswitch实现不同物理机中的Docker容器互连
1. 测试环境 75机(10.11.150.75):Red Hat Enterprise Linux Server 7.0,无外网访问权限,已安装Docker Server 74机(10.11.150 ...
- ZOJ2923 Calculate Roads(SPFA上的dp)
算是学了图dp后的第一次应用吧.题目其实真的是非常不严谨,什么都没说,基本靠猜,而且严格来说数据应该会有爆int的,不过不管那么多啦,思路对了就好- -0 #include<iostream&g ...
- sql server 数据库 数据DateTime 转mysql
首先将sql server DateTime 转换为varchar(50) 然后更新转换过的 DateTime字段, UPDATE 表名 SET LastUpdateTime=CONVERT(VAR ...
- 传说中的WCF(12):服务器回调有啥用
你说,服务器端回调有啥用呢?这样问,估计不好回答,是吧.不急,先讨论一个情景. 假设现有服务器端S,客户端A开始连接S并调用相关操作,其中有一个操作,在功能上有些特殊,调用后无法即时回复,因为在服务器 ...
- [转载] Linux poll机制
原地址:http://hongwazi.blog.163.com/blog/#m=0&t=3&c=poll poll的是一种查询的方式,英文解释 :民意调查 函数原型:int poll ...
- poj 3615(floyd变形)
题目链接:http://poj.org/problem?id=3615 思路:map[i][j]表示顶点i,j之间的最高的障碍物,于是题目要求的是最高障碍物的最小值,不就是min(map[i][j], ...
- 【Apache运维基础(5)】Apache的Rewrite攻略(2)
简述 .htaccess文件(或者"分布式配置文件")提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作 ...
- Android核心分析之二十三Andoird GDI之基本原理及其总体框架
Android GDI基本框架 在Android中所涉及的概念和代码最多,最繁杂的就是GDI相关的代码了.但是本质从抽象上来讲,这么多的代码和框架就干了一件事情:对显示缓冲区的操作和管理. GDI主 ...
- MySQL定义外键的方法
MySQL定义外键的方法是每个学习MySQL的人都需要掌握的知识,下文就对MySQL定义外键的语句写法进行了详细的阐述,供您参考. 外键为MySQL带来了诸多的好处,下面就为您介绍MySQL定义外键的 ...
- Jlink更新新固件USB连接不上的问题
采购新买了一个jlink,在调试过程中发现不能使用.拿到手后对jink上电以后,发现灯不亮,到网上查了一下估计是固件损坏的原因,经过一番摸索从新更新了固件,然后可以正常使用了,下面说一下步骤: 新版的 ...