-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (82 loc) · 3.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>New Lava Lamp Menu</title>
<link rel="stylesheet" href="../../css/base.css">
<link rel="stylesheet" href="css/style.css">
<script src="../../js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<nav>
<a href="#" class="current-link">首页</a>
<a href="#">关于</a>
<a href="#">文章列表</a>
<a href="#">我最近完成的作品</a>
<a href="#">联系</a>
</nav>
<article>
<h1>New Lava-Lamp Menu</h1><span><a href="https://github.com/nightire/New-Lava-Lamp-Menu">要源代码请狂点我!- Source Code at Here!</a></span>
<h2>最重要的是!!!</h2>
<p><strong>谁规定的导航条(菜单)一定要用ul(无序列表)的?</strong></p>
<p>每一次都要去做ul / li / a的样式调整,真是烦也烦死了,所以这一次我在HTML5的光辉照耀下尝试了不用无序列表的导航条,效果杠杠的!(详情自见本页范例的HTML源码)</p>
<p>然后我重写了鼎鼎有名的Lava-Lamp Menu,将其做成了一个jQuery插件,以方便在项目中快速部署和调整。</p>
<p>That is it!</p>
<h2>自定义参数说明:</h2>
<p>
<dl>
<dd>overlap:浮动指示超出链接本身的高度</dd>
<dt>
<p><strong>默认值:20</strong><br>等同于上下边距各超出10px。</p>
</dt>
<dd>speed:动态效果的速度</dd>
<dt>
<p><strong>默认值:750</strong><br>单位:毫秒(ms)</p>
</dt>
<dd>effect:动态效果的种类</dd>
<dt>
<p><strong>默认值:easeOutBack</strong><br>可选用的效果参见:
<a href="http://jqueryui.com/demos/effect/#easing">jQuery UI手册</a></p>
</dt>
<dd>reset:浮动指示回到原始位置的时间</dd>
<dt>
<p><strong>默认值:1500</strong><br>单位:毫秒(ms)</p>
</dt>
<dd>bgColor:浮动指示的背景颜色</dd>
<dt>
<p><strong>默认值:#5ca2e2</strong></p>
</dt>
</dl>
<h2>调用方式</h2>
<ol>
<li>
<h3>默认调用:</h3>
<pre>
$('nav').newLavaLampMenu();
</pre>
</li>
<li>
<h3>自定义调用(范例):</h3>
<pre>
$('nav').newLavaLampMenu({
overlap: 30, <span class="comment">// 上下各15</span>
speed: 500, <span class="comment">// 500ms</span>
effect: 'swing', <span class="comment">// 摆动效果</span>
reset: 2000, <span class="comment">// 2.5s</span>
bgColor: '#db70db' <span class="comment">// #db70db</span>
});
</pre>
</li>
</ol>
</p>
<p>
<em>Note:</em>在IE9以下浏览器看起来会比较丑,因为本示例中仅含有最基本的CSS样式,想要美观的话可以自行调整CSS文件;IE9+及其他现代浏览器看起来会更舒服,至少我添加了一点点圆角在里面(CSS3 Only)。
</p>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="js/jquery.new.lava.lamp.js"></script>
<script>$('nav').newLavaLampMenu();</script>
</body>
</html>