<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lava Lamp Menu Demo</title>
<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<h3>With Image</h3>
<ul class="lavaLampWithImage" id="1">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
<br><br><br>
<h3>No Image</h3>
<ul class="lavaLampNoImage" id="2">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
<br><br><br>
<h3>Bottom Style</h3>
<ul class="lavaLampBottomStyle" id="3">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
</body></html>
分享到：
相关推荐
jQuery.lavalamp是一款优秀的jQuery插件，它实现了下划线随鼠标左右滑动的效果，为网页导航菜单赋予了动态的生命力。本文将深入探讨这个插件的工作原理、使用方法以及如何在项目中集成和自定义。 首先，jQuery....
jquery.lavalamp-1.4.js full js with comments and documentation
首先，要使用Lavalamp插件，需要在页面中引入三个重要的jQuery库文件，它们分别是`jquery-2.0.0.min.js`、`jquery.easing.min.js`以及`jquery.lavalamp.js`。这三个库文件为Lavalamp插件提供了基础的jQuery支持和...
安装jQuery.lavalamp插件非常简单，首先你需要在页面中引入jQuery库和jQuery.lavalamp.js文件。然后，选择一个包含导航菜单的HTML元素，并应用jQuery.lavalamp方法。例如： ```html <script src="path/to/jquery.js...
去掉LI中宽度的设置，可用于任何长度的文字。 范例三特点：用下划线实现，导航栏文字字数为四字，去掉或重新设置A标记中的宽度，可用于任何长度的文字。 引入了以下jQuery资源： jquery-1.1.3.1.min.js jquery....
自动默认位置LavaLamp将客户端位置栏中的链接与容器jQuery LavaLamp的li元素内的a href进行仔细比较，并将悬停元素的起始位置默认为匹配的li元素。 可以通过几种方式来覆盖它：使用startItem选项，通过将...
【jQuery插件应用实例】 jQuery，作为一款广受欢迎的JavaScript框架，因其简洁的API和丰富的功能，被开发者广泛应用于各种Web项目中。本文将介绍50个开发者最常使用的jQuery插件，涵盖从滑动门控制到表单验证等多个...
对于导航菜单而言，jQuery 插件能够实现动态效果，如平滑滚动、悬停高亮、下拉菜单等，使菜单更具吸引力和互动性。 1. **lavalamp_0.1.0**：这是一个jQuery插件，它实现了“液态”效果的导航菜单。LavaLamp效果使得...
三款jquery lavalamp制作的动画导航是一款jquery lavalamp插件制作的动画导航栏。
- `js/jquery.ui.tabs.js`：jQuery UI的tabs插件，用于创建选项卡界面。 - 除了脚本文件外，还定义了一些CSS样式，用于控制各个元素的布局和外观。 ##### 2. CSS样式分析 - 定义了`#banner`的样式，设置了位置、...
动态感比较强lavalamp_0[1].1.0"指的是一个可能与网页设计相关的资源，尤其是网站导航菜单的样式或插件。Lavalamp通常指的是一个JavaScript效果，它为网站的导航菜单添加了动态、流动的视觉效果，让人联想到熔岩灯的...
而"jQuery 熔岩灯导航菜单特效"则为这一功能增添了一份独特的视觉效果，使得用户在操作过程中能够享受到更为丰富的交互体验。下面，我们将详细探讨这一特效的实现原理、所需技术以及应用。 **1. jQuery 框架介绍** ...
例如，`jquery.js`是基础的jQuery库，`jquery.easing.min.js`提供了平滑过渡效果，`jquery.onserv.js`和`jquery.onserv.min.js`是核心插件文件，负责实现在线客服功能，而`jquery.lavalamp.min.js`可能用于导航菜单...
jQuery插件在网站设计中起着关键作用，它们能够帮助开发者快速实现各种动态效果和增强功能。例如，`Sliding Panels`插件可以创建出滑动门效果，使元素能够平滑地展开和关闭，如同手风琴般优雅。`jQuery Collapse`则...
### 30个jQuery导航菜单插件和教程 在网页设计中，导航菜单的重要性不言而喻。它不仅是用户访问网站时的第一印象，更是引导用户浏览网站内容的关键路径。一个好的导航菜单应该具备清晰的结构、良好的用户体验以及...
CSS3垂直Lavalamp导航是一种流行且具有动态效果的网页导航设计，它在传统的垂直导航菜单的基础上，结合了Lavalamp（灯泡）特效，即鼠标悬停在菜单项上时，背景会像熔化的灯泡一样流动，为用户带来独特的交互体验。...
**正文** ...首先，你需要在网页中引入jQuery库和LavaLamp插件的JavaScript文件。接着，只需对目标导航菜单应用特定的CSS类，并调用jQuery插件方法，即可激活滑动效果。例如，你可以这样设置： ```html ...
`jquery.lavalamp.js`和`jquery.lavalamp.min.js`是实现滑动菜单功能的jQuery插件，它们扩展了jQuery库，提供了LavaLamp效果的实现。 `bg.gif`和`lava.gif`是两种图像文件，可能分别作为菜单的背景和流动效果的元素...