- 浏览: 155044 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
jiangyeqt:
好好的温习了一遍,讲的非常的到位
Session的原理 -
JAVA静静:
这是什么啊?有没有源码?看不懂诶!
开源框架Pushlet入门 -
colinzhy:
讲的很深刻,学习了
Session的原理 -
昔雪似花:
...
Map-iterator -
不相信眼泪:
恩,很好,多谢
.scc文件是做什么用的?
具有flash效果的菜单,基于jquery
Download the zip file version 0.2.0 of LavaLamp and open the demo.html to check it out for yourself
LavaLamp menu
来源:http://gmarwaha.com/blog/?p=7
翻译:lxr
转载请注明出去。
预览:DEMO1
将鼠标放在上面的例子上,你就会感觉到Lava Lamp的完美效果。LavaLamp menu是基于jquery库的,就我个人而言,我认为它的效果并不亚于flash菜单,而且它比flash要小得多。就像你知道的它仅仅只有700bytes。
<!--本文转载自http://www.hotajax.org -->我常注意到,授权一般在最终版本。现在我诚落在早期版本你将获得授权。这个效果最先是由Guillermo Rauch用mootools库写的。我所做的的仅仅是为了jquery的爱好者而将它改写为基于jquery库的。非常感谢Guillermo 创建的完美效果。特别感谢Stephan Beal将它取名为“LavaLamp”,和Glen Lipka 在外观图形上的帮助,以及众多的jquery爱好者的支持。
作为一个用户界面开发者,我们知道用户最常用的是菜单。我们一直追求的就是吸引用户的眼球,我相信LavaLamp向这一方向迈出了一步。在这些废话让你厌烦之前让我们开始将LavaLamp加入到你的网站中。
我希望你认同一个典型的html部件由3个不同的元件组成。
现在让我们按照上面的步骤将LavaLamp菜单加入到你的网站中。在用jquery库替换mootools库的过程中,我为你写了javascript和css以供使用。因此请你按照本页教程的步骤使用jQuery。在Guillermo Rauch
的页面中有mootools版本的教程。
步骤1: HTML
由于大多数用户界面开发人员认为无序清单( ul )是正确的语义结构菜单/导航,所用就让我们从这里开始。
<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>
你可以修改css以获得自己想要的外观,这里列出了一种,在“Bonus”部分列出了另外几种:
.lavaLamp {}{
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden; }
/**//* Force the list to flow horizontally */
.lavaLamp li {}{
float: left;
list-style: none;
}
/**//* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {}{
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {}{
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
} /**//* Styles for each menu-item. */
.lavaLamp li a {}{
position: relative;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff;
outline: none;
text-align: center;
height: 30px;
top: 7px;
z-index: 10;
letter-spacing: 0;
float: left;
display: block;
margin: auto 10px;
}
第一,我们用亮橙色作为背景以及一些基本属性height,width,padding,margin等等来风格化“ul”。我们使用了相对定位,这样我们才能确定背景“li”与“ul”的关系。这样我们才能自由移动背景“li”。
下一步,我们使“li”水平移动而不是垂直。默认时它是垂直移动的,在这种情况下我们使用“float:left”以达到我们所需的效果。
下一步,我们使用“li”来高亮表示现在所在的菜单项,这使用了sliding doors technique另外注意上面所提到的相对位置。
最后一步,格式化链接
上面的规则不是很易懂,如果你对改写css没有信心我推荐你快速阅读一下CSS positioning。它简短且通俗易懂。
步骤3: Javascript
这是一个非常简单的部分,所有的功能在Lava Lamp plugin中,作为一个开发者你要做的仅仅是将它包含到你的网页中。
<script type="text/javascript" src="/path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="/path/to/jquery.easing.js"></script>
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
接下来,在“document.ready event”中,“fx”默认为“linear”“speed”为“500”。
Bonus
仅仅简单修改一下css你就可获得一个完全不同风格的菜单,当然其他部分不需要改动
预览:DEMO2
这是另外一个,也只改动了css,我想它并不美观但我想要说的是你仅仅是被自己的想象力所束缚了。
预览:DEMO3
<!-- google_ad_section_end -->
发表评论
-
javascript 中数组使用方法
2009-10-29 13:27 618/* 由于javascript是一种无类型语言,所以一个数 ... -
ajax基础
2009-11-03 10:10 578XMLHTTPRequest---->JavaScrip ... -
ajax基础-jquery
2009-11-03 10:12 651//---------------------------- ... -
正则基础
2009-11-03 10:16 606<html> <script> ... -
可编辑的表格
2009-11-03 10:23 8321脚本jqueryedit.js //在页面装载时,让所有的t ... -
DWR-基本配置文件
2009-11-03 10:33 6671 dwr.xml <?xml version=&quo ... -
DWR-笔记
2009-11-03 10:36 663var xmlrequestXml; function cre ... -
DWR-util.js包工具方法
2009-11-03 10:41 1108util.js包含一些有用的函数function,用于在客户端 ... -
DWR-返回-参数为Map
2009-11-03 10:43 678方法1: fuction test{ tt.hello( ... -
DWR-返回-参数为集合
2009-11-03 10:54 686DWR中处理List调用返回JavaBean的java方法 4 ... -
dwr模拟google suggest
2009-11-03 11:07 7641 web.xml <!------ AutoSugge ... -
正则基础2
2009-11-04 14:42 7291111-1234 re \d{5}(-\d{4})? ?指前 ... -
cookie.js
2009-11-04 15:42 691js读写cookie可以提高效率,现对代码作仔细说明,以备用: ... -
Event对象的属性
2009-11-29 21:37 639function MyAlert() { var msg=&q ... -
javascript DOM
2009-11-29 21:51 643<!------------------///事件处理 ... -
javascript语法_函数_对象_数组
2009-11-29 21:52 732<script language="javas ... -
事件显示声明
2009-11-29 21:55 704<script type=text/javascript ... -
ajax 书签
2009-12-30 15:17 752框架: Yahoo UIProtoTypeJQueryOpen ... -
给Dreamweaver安装jQuery插件jQuery_API.mxp
2010-01-20 12:38 5050要让Dreamweaver支持jQuery自动提示代码功能,方 ... -
jQuery-强大的jQuery选择器 (详解)[转]
2010-01-21 11:48 8791. 基础选择器 Basics 名称 ...
相关推荐
jquery.lavalamp-1.4.js full js with comments and documentation
把lavalamp改成类似这个网站http://www.adjust.be/home的导航效果。
8好玩的导航菜单。动态感比较强lavalamp_0[1].1.0
css3垂直Lavalamp导航
Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?现在我使用CSS3写了一个水平的Lavalamp的导航效果,这个效果其实很简单,主要...
css3垂直Lavalamp导航是一款纯css3实现的垂直Lavalamp导航特效。 css3垂直Lavalamp导航演示图:
jQuery LavaLamp JavaScript悬停效果库可增强导航用户体验。 有关更多信息,请参见的项目详细信息,演示,示例和教程。特征定位和容器选项1.3.5版中增强的target和container选项以及新的includeMargins选项允许使用...
三款jquery.lavalamp制作的动画导航是一款jquery.lavalamp插件制作的动画导航栏。
一格一格的变化改为1-2-1的渐进变化 lavaLamp2格滑动.js
三款jquery lavalamp制作的动画导航是一款jquery lavalamp插件制作的动画导航栏。
lavalamp, 视觉上区分语言的文本编辑器主题 Lavalamp是一个WIP文本编辑器主题。目前在Vim中使用了英镑,但我希望将它移植到和 Sublime 文本。 === =安装将 lavalamp.vim 复制到 .vim/colors 目录。$ cd lav
Lavalamp应用程序根据受监视网站的状态打开或关闭lavalamp(或其他电气设备)。 通常,您可以监视构建服务器以指示构建失败。 多个网站可以控制多个设备。
Lava Lamp 2.0 Abstract The lava lamp is an iconic piece of popular culture which was originally developed in the 1960’s. Over time it has become a novelty decoration for a room in an average home....
下面我们将使用纯css实现滑动菜单效果,使用css3转换和重新创建一般同级连结符选择器。下面我们将讨论三个简单的例子,感兴趣的朋友可以了解
css3垂直Lavalamp导航是一款纯css3实现的垂直Lavalamp导航特效。 css3垂直Lavalamp导航演示图:
比较COOL的焦点滑动跟随鼠标移动的菜单
NULL 博文链接:https://nbczw8750.iteye.com/blog/2316778
三款jquery.lavalamp制作的动画导航是一款jquery.lavalamp插件制作的动画导航栏。