<!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-1.4.js full js with comments and documentation
去掉LI中宽度的设置,可用于任何长度的文字。 范例三特点:用下划线实现,导航栏文字字数为四字,去掉或重新设置A标记中的宽度,可用于任何长度的文字。 引入了以下jQuery资源: jquery-1.1.3.1.min.js jquery....
导航条动态显示效果借助插件Lavalamp可以轻松实现,以前用animate来实现,效果不是很好
自动默认位置LavaLamp将客户端位置栏中的链接与容器jQuery LavaLamp的li元素内的a href进行仔细比较,并将悬停元素的起始位置默认为匹配的li元素。 可以通过几种方式来覆盖它:使用startItem选项,通过将...
NULL 博文链接:https://nbczw8750.iteye.com/blog/2316778
三款jquery.lavalamp制作的动画导航是一款jquery.lavalamp插件制作的动画导航栏。
三款jquery lavalamp制作的动画导航是一款jquery lavalamp插件制作的动画导航栏。
把lavalamp改成类似这个网站http://www.adjust.be/home的导航效果。
三款jquery.lavalamp制作的动画导航是一款jquery.lavalamp插件制作的动画导航栏。
8好玩的导航菜单。动态感比较强lavalamp_0[1].1.0
Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?现在我使用CSS3写了一个水平的Lavalamp的导航效果,这个效果其实很简单,主要...
需要调用的文件有:jQuery库(1.2以上版本),jQuery缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个ul li列表的样式文件。例如,本demo实例页面链接如下截图: 2、HTML代码...
css3垂直Lavalamp导航
css3垂直Lavalamp导航.zip
一格一格的变化改为1-2-1的渐进变化 lavaLamp2格滑动.js
lavalamp, 视觉上区分语言的文本编辑器主题 Lavalamp是一个WIP文本编辑器主题。目前在Vim中使用了英镑,但我希望将它移植到和 Sublime 文本。 === =安装将 lavalamp.vim 复制到 .vim/colors 目录。$ cd lav
Lavalamp应用程序根据受监视网站的状态打开或关闭lavalamp(或其他电气设备)。 通常,您可以监视构建服务器以指示构建失败。 多个网站可以控制多个设备。