-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathb_motion.html
More file actions
195 lines (184 loc) · 5.42 KB
/
Copy pathb_motion.html
File metadata and controls
195 lines (184 loc) · 5.42 KB
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Motion - DK Toolkit Index</title>
<link href="resource/css/index_style.css" rel="stylesheet" type="text/css" />
<script src="resource/js/dk_tools.js"></script>
<script src="resource/js/motion.js"></script>
</head>
<body>
<header>
<div id="logo_area">
<a id="logo">DK Toolkit</a>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">基础</a></li>
<li><a href="#">控件</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
</header>
<div id="main">
<div class="box_header">
<span>首页</span>
</div>
<nav id="sub">
<ul>
<li><a href="#">基础</a>
<ul class="sub">
<li><a href="#">基础工具库</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#" class="select">动画</a></li>
</ul>
</li>
<li><a href="#">组件</a>
<ul class="sub">
<li><a href="#">本地存储增强</a></li>
<li><a href="#">Placeholder-jQuery插件</a></li>
<li><a href="#">表单验证工具</a></li>
<li><a href="#">日历</a></li>
<li><a href="#">颜色拾取器</a></li>
<li><a href="#">拖拽</a></li>
<li><a href="#">多种特效幻灯片</a></li>
<li><a href="#">弹出窗口</a></li>
<li><a href="#">动态表格</a></li>
<li><a href="#">模拟右键菜单</a></li>
<li><a href="#">简单的文本编辑器</a></li>
<li><a href="#">自定义下拉框</a></li>
<li><a href="#">标签控件</a></li>
<li><a href="#">树形菜单</a></li>
<li><a href="#">延迟加载</a></li>
<li><a href="#">图片浏览器</a></li>
</ul>
</li>
<li><a href="#">其他</a>
<ul class="sub">
<li><a href="#">带角的气泡</a></li>
<li><a href="#">会动的眼珠</a></li>
<li><a href="#">HTML5时间轴</a></li>
<li><a href="#">一个简单的HTML5汽车游戏</a></li>
</ul>
</li>
</ul>
</nav>
<div id="main_content">
<div class="cline">
<h2>动画工具演示</h2>
</div>
<div class="cline">
<style>
#m_container{position:relative;height:300px;background:#f1f1f1;}
#md_1{width:10px;height:10px;background:#06c;position:absolute;left:0;top:0;}
</style>
<div id="m_container" style="">
<div id="md_1"></div>
</div>
</div>
<div class="cline"><button class="btn" id="btn_run">运行动画</button></div>
<div class="cline">
<h3>示例代码</h3>
</div>
<div class="cline">
<pre>
var color = 'rgb(' + dk.rand(0,255) + ',' + dk.rand(0,255) + ',' + dk.rand(0, 255) + ')';
mo('md_1').animate({left: dk.rand(100, 500), top: dk.rand(100, 240), width: dk.rand(20, 50), height: dk.rand(20, 50), backgroundColor: color}, 40);
</pre>
</div>
<div class="cline">
<h2>使用说明</h2>
</div>
<div class="cline">
第三版动画工具，使用全局定时器提高动画运行效率。<br />
为了方便使用，为window对象扩充了一个mo函数，通过直接调用mo函数可以直接使用动画方法。
</div>
<div class="cline">
<h3>mo(target)</h3>
</div>
<div class="cline">
接受一个DOM元素或者ID值，返回一个Motion对象。
</div>
<div class="cline">
<h4>mo.setup(options)</h3>
</div>
<div class="cline">
设置动画基本参数，options包含两个参数：tween，选用的运动公式；frames，帧速。
</div>
<div class="cline">
<h3>Motion(node)</h3>
</div>
<div class="cline">
动画对象
</div>
<div class="cline">
<h4>Motion.hide([duration, callback])</h4>
</div>
<div class="cline">
隐藏对象
</div>
<div class="cline">
<h4>Motion.show([duration, callback])</h4>
</div>
<div class="cline">
显示对象
</div>
<div class="cline">
<h4>Motion.slideDown([duration, callback])</h4>
</div>
<div class="cline">
向下展开对象
</div>
<div class="cline">
<h4>Motion.slideUp([duration, callback])</h4>
</div>
<div class="cline">
向上闭合对象
</div>
<div class="cline">
<h4>Motion.fadeIn([duration, callback])</h4>
</div>
<div class="cline">
淡入
</div>
<div class="cline">
<h4>Motion.fadeOut([duration, callback])</h4>
</div>
<div class="cline">
淡出
</div>
<div class="cline">
<h4>Motion.color(begincolor, endcolor[, duration, callback])</h4>
</div>
<div class="cline">
颜色动画
</div>
<div class="cline">
<h4>Motion.animate(styles[, duration, callback])</h4>
</div>
<div class="cline">
高级动画效果。<br />
第一个参数为json对象，为样式的对应：{backgroundColor: '#fff', width: 300}<br />
第二个参数为持续的帧数<br />
第三个参数为动画完成后调用的函数。
</div>
</div>
<div class="clr"></div>
</div>
<footer>
Copyright © Dukai 2012
</footer>
<script src="resource/js/template.js"></script>
<script src="resource/js/ajax.js"></script>
<script src="resource/js/navbar.js" id="navbar_tmpl"></script>
<script>
navbar('motion');
function runAnimate(){
var color = 'rgb(' + dk.rand(0,255) + ',' + dk.rand(0,255) + ',' + dk.rand(0, 255) + ')';
mo('md_1').animate({left: dk.rand(100, 500), top: dk.rand(100, 240), width: dk.rand(20, 50), height: dk.rand(20, 50), backgroundColor: color}, 40);
}
dk.addEvent('btn_run', 'click', runAnimate);
</script>
</body>
</html>