-
Notifications
You must be signed in to change notification settings - Fork 0
/
works.html
236 lines (236 loc) · 8.37 KB
/
works.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
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作品展示</title>
<link rel="stylesheet" href="css/works.css"/>
</head>
<body>
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="works/mi/mi.html" target="_blank">
<img src="image/mi.jpg" alt="" />
<h1>小米主页</h1>
<p>采用html/css仿写小米官网静态主页</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/aiqiyi/index.html" target="_blank">
<img src="image/aiqiyi.jpg" alt="" />
<h1>爱奇艺</h1>
<p>仿写爱奇艺静态网页</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/ly/index.html" target="_blank">
<img src="image/tongcheng.jpg" alt="" />
<h1>同程网</h1>
<p>采用rem布局仿写移动端同程网,实现基本的轮播图和选项卡等功能。</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/mls/index.html" target="_blank">
<img src="image/meilishuo.jpg" alt="" />
<h1>美丽说</h1>
<p>仿写美丽说静态网页</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/juhuasuan/index.html" target="_blank">
<img src="image/jhs.png" alt="" />
<h1>聚划算</h1>
<p>移动端聚划算静态网页</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/tab/demo.html" target="_blank">
<img src="image/tab.jpg" alt="" />
<h1>轮播图</h1>
<p>实现轮播图效果</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/zoom/zoom.html" target="_blank">
<img src="image/zoom.jpg" alt="" />
<h1>放大镜效果</h1>
<p>运用js实现放大镜效果</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/imageSelector/index.html" target="_blank">
<img src="image/imgselector.jpg" alt="" />
<h1>图片选择</h1>
<p>实现简单的图片选择功能</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/icoManage/demo1.html" target="_blank">
<img src="image/wufenggundong.jpg" alt="" />
<h1>无缝滚动</h1>
<p>图片无缝滚动</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/icoManage/demo3.html" target="_blank">
<img src="image/icoManage.jpg" alt="" />
<h1>图标管理</h1>
<p>图标管理,与相碰撞的图标交换位置</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/luck/index.html" target="_blank">
<img src="image/luck.jpg" alt="" />
<h1>抽奖游戏</h1>
<p>模拟抽奖小游戏</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/icoManage/demo2.html" target="_blank">
<img src="image/icoManage_2.jpg" alt="" />
<h1>仿苹果桌面</h1>
<p>仿苹果桌面图标功能,鼠标距离图标越近,图标变大</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3ImgShow/demo.html" target="_blank">
<img src="image/imgtab.jpg" alt="" />
<h1>图片切换</h1>
<p>CSS3特效实现图片切换</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/imgShow/demo.html" target="_blank">
<img src="image/imgshow.jpg" alt="" />
<h1>图片展示</h1>
<p>鼠标拖动图片依次显示</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/imgTab/demo.html" target="_blank">
<img src="image/imgpre.jpg" alt="" />
<h1>图片切换</h1>
<p>js和CSS3实现图片立体预览</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/3DimgCricle/demo.html" target="_blank">
<img src="image/3Dimgcricle.jpg" alt="" />
<h1>3D照片环</h1>
<p>js和CSS3实现图片环预览</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/ball/move.html" target="_blank">
<img src="image/move1.jpg" alt="" />
<h1>高级运动</h1>
<p>弹性运动</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/phone/index.html" target="_blank">
<img src="image/phone.jpg" alt="" />
<h1>模拟手机视图</h1>
<p>通过CSS和js模拟在手机屏幕下视图</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3/loading.html" target="_blank">
<img src="image/loading.jpg" alt="" />
<h1>加载特效</h1>
<p>运用CSS3实现加载特效</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3/3Dtuoluo.html" target="_blank">
<img src="image/zhuixing.jpg" alt="" />
<h1>旋转的六棱锥</h1>
<p>运用CSS3特性实现六棱锥旋转</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3/3Dmenu.html" target="_blank">
<img src="image/menu.jpg" alt="" />
<h1>3D菜单</h1>
<p>运用CSS3实现3D菜单</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3/3Dcube.html" target="_blank">
<img src="image/cube.jpg" alt="" />
<h1>立方体</h1>
<p>运用CSS3实现立方体的旋转并滑入分散开效果</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/css3/3Dcircle.html" target="_blank">
<img src="image/circle.jpg" alt="" />
<h1>旋转的圆环</h1>
<p>运用CSS3实现3D圆环旋转</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="https://github.com/honghaowu/honghaowu.github.com/blob/master/works/zquery/zQuery.js" target="_blank">
<img src="image/zQuery.jpg" alt="" />
<h1>zQuery</h1>
<p>封装自己的zQuery库</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="https://github.com/honghaowu/honghaowu.github.com/blob/master/works/ajax/ajax.js" target="_blank">
<img src="image/ajax.jpg" alt="" />
<h1>Ajax</h1>
<p>封装的ajax</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="https://github.com/honghaowu/honghaowu.github.com/blob/master/works/jsonp/jsonp.js" target="_blank">
<img src="image/jsonp.jpg" alt="" />
<h1>jsonp</h1>
<p>jsonp</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="https://github.com/honghaowu/honghaowu.github.com/blob/master/works/move/move.js" target="_blank">
<img src="image/move.jpg" alt="" />
<h1>move框架</h1>
<p>封装的运动框架</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/pingbao/demo.html" target="_blank">
<img src="image/pingbao.jpg" alt="" />
<h1>屏保</h1>
<p>运用HTML5中的canvas绘制线型屏保</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/watch/demo.html" target="_blank">
<img src="image/watch.jpg" alt="" />
<h1>智能手表</h1>
<p>运用HTML5中的canvas结合定时器绘制智能手表</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/fishgame/index.html" target="_blank">
<img src="image/fish.jpg" alt="" />
<h1>捕鱼达人</h1>
<p>基于HTML5开发网页版捕鱼达人</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/2048/index.html" target="_blank">
<img src="image/2048.jpg" alt="" />
<h1>2048</h1>
<p>通过js、jQuery开发2048小游戏</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="works/wuziqi/wuziqi/index.html" target="_blank">
<img src="image/wuziqi.jpg" alt="" />
<h1>五子棋</h1>
<p>通过HTML5的canvas开发简易五子棋小游戏</p>
</a>
</li>
</ul>
</body>
</html>