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火焰等效果导航菜单的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JQUERY 插件开发——MENU(导航菜单)

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  3. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  4. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  5. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  6. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

  7. jquery倾斜的动画导航菜单

    1. [代码]完整源代码  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. Jquery列表中的导航菜单的应用

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 利用jquery实现百度新闻导航菜单滑动动画

    前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...

随机推荐

  1. 利用Openvswitch实现不同物理机中的Docker容器互连

    1. 测试环境 75机(10.11.150.75):Red Hat Enterprise Linux Server 7.0,无外网访问权限,已安装Docker Server 74机(10.11.150 ...

  2. ZOJ2923 Calculate Roads(SPFA上的dp)

    算是学了图dp后的第一次应用吧.题目其实真的是非常不严谨,什么都没说,基本靠猜,而且严格来说数据应该会有爆int的,不过不管那么多啦,思路对了就好- -0 #include<iostream&g ...

  3. sql server 数据库 数据DateTime 转mysql

    首先将sql server  DateTime 转换为varchar(50) 然后更新转换过的 DateTime字段, UPDATE 表名 SET LastUpdateTime=CONVERT(VAR ...

  4. 传说中的WCF(12):服务器回调有啥用

    你说,服务器端回调有啥用呢?这样问,估计不好回答,是吧.不急,先讨论一个情景. 假设现有服务器端S,客户端A开始连接S并调用相关操作,其中有一个操作,在功能上有些特殊,调用后无法即时回复,因为在服务器 ...

  5. [转载] Linux poll机制

    原地址:http://hongwazi.blog.163.com/blog/#m=0&t=3&c=poll poll的是一种查询的方式,英文解释 :民意调查 函数原型:int poll ...

  6. poj 3615(floyd变形)

    题目链接:http://poj.org/problem?id=3615 思路:map[i][j]表示顶点i,j之间的最高的障碍物,于是题目要求的是最高障碍物的最小值,不就是min(map[i][j], ...

  7. 【Apache运维基础(5)】Apache的Rewrite攻略(2)

    简述 .htaccess文件(或者"分布式配置文件")提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录.作 ...

  8. Android核心分析之二十三Andoird GDI之基本原理及其总体框架

     Android GDI基本框架 在Android中所涉及的概念和代码最多,最繁杂的就是GDI相关的代码了.但是本质从抽象上来讲,这么多的代码和框架就干了一件事情:对显示缓冲区的操作和管理. GDI主 ...

  9. MySQL定义外键的方法

    MySQL定义外键的方法是每个学习MySQL的人都需要掌握的知识,下文就对MySQL定义外键的语句写法进行了详细的阐述,供您参考. 外键为MySQL带来了诸多的好处,下面就为您介绍MySQL定义外键的 ...

  10. Jlink更新新固件USB连接不上的问题

    采购新买了一个jlink,在调试过程中发现不能使用.拿到手后对jink上电以后,发现灯不亮,到网上查了一下估计是固件损坏的原因,经过一番摸索从新更新了固件,然后可以正常使用了,下面说一下步骤: 新版的 ...