-
Notifications
You must be signed in to change notification settings - Fork 0
/
page2.html
278 lines (250 loc) · 9.19 KB
/
page2.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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en-us">
<title>王东升个人作品站</title>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/commom.css">
<link rel="stylesheet" href="css/page2.css">
<link rel="shortcut icon" href="./img/favicon.ico" />
<script src="js/commom.js"></script>
<script src="js/page2.js"></script>
</head>
<body>
<div class="page" id="page">
<!-- 导航条 -->
<nav class="nav" id="nav">
<ul class="time" id="time">
<li><img src="img/num.png" /></li>
<li><img src="img/num.png" /></li>
<li>:</li>
<li><img src="img/num.png" /></li>
<li><img src="img/num.png" /></li>
<li>:</li>
<li><img src="img/num.png" /></li>
<li><img src="img/num.png" /></li>
</ul>
<ul class="clearfix nav_right">
<li><a href="./">首页</a></li>
<li><a href="#">js作品页</a></li>
<li><a href="./page3.html">html5作品页</a></li>
<!-- <li><a href="http://itdongsheng.github.io/page2.html">手机端作品页</a></li>-->
<li id="nav_bar"></li>
</ul>
<a class="download2" href="./bin/web前端开发-王东升个人简历.doc">下载简历</a>
</nav>
<!-- 轮播图 开始-->
<section class="banner_box" >
<h2>轮播图</h2>
<h3>左右切换,无缝滚动效果</h3>
<div class="banner" id="banner">
<ul>
<li><img src="img/0.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
<ol>
<li class="on">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<a href="javascript:;" class="prev">prev</a>
<a href="javascript:;" class="next">next</a>
</div>
</section>
<!-- 轮播图结束 -->
<section class="box" id="box">
<h2>穿墙效果</h2>
<h3>点击进入,每一个都有作品</h3>
<ul id="select">
<li> 九宫格<div class="div_box">点击进入</div></li>
<li>3D拖拽<div class="div_box">点击进入</div></li>
<li>苹果菜单<div class="div_box">点击进入</div></li>
<li>进度条<div class="div_box">点击进入</div></li>
<li>放大镜<div class="div_box">点击进入</div></li>
<li>倒计时<div class="div_box">点击进入</div></li>
<li>滚轮放大<div class="div_box">点击进入</div></li>
<li>右键自定义菜单<div class="div_box">点击进入</div></li>
<li>弹性小球
<div class="div_box">点击进入</div></li>
</ul>
<!-- 九宫格开始 -->
<ul id="in_more">
<li class="first more">
<h4>任意拖动黄色区域,红色区域,中间区域</h4>
<div id="box_first">
<p class="r"></p>
<p class="b"></p>
<p class="l"></p>
<p class="t"></p>
<span class="rb"></span>
<span class="rt"></span>
<span class="lt"></span>
<span class="lb"></span>
</div>
<i>关闭</i>
</li>
<li class="more two">
<h4>拖动任意图片,简单的3d效果</h4>
<ul id="ul_container">
<li class="pic1" style="z-index: 3;"><img src="img/3d/1.jpg" height="149" width="186" alt="" /></li>
<li class="pic2" style="z-index: 4;"><img src="img/3d/2.jpg" alt="" /></li>
<li class="pic3" style="z-index: 5;"><img src="img/3d/3.jpg" alt="" /></li>
<li class="pic4" style="z-index: 4;"><img src="img/3d/4.jpg" alt="" /></li>
<li class="pic6" style="z-index: 3;"><img src="img/3d/5.jpg" alt="" /></li>
<li class="pic7" style="z-index: 2;"><img src="img/3d/6.jpg" alt="" /></li>
<li class="pic8" style="z-index: 5;"><img src="img/3d/7.jpg" alt="" /></li>
<li class="pic5" style="z-index: 1;"></li>
</ul>
<i>关闭</i>
</li>
<li class="more three">
<h4>鼠标在图片上左右移动,根据距离判断位置和大小</h4>
<div id="phone">
<img src="img/phone/1.png" width="64" />
<img src="img/phone/2.png" width="64" />
<img src="img/phone/3.png" width="64" />
<img src="img/phone/4.png" width="64" />
<img src="img/phone/5.png" width="64" />
</div>
<i>关闭</i>
</li>
<li class="more four">
<h4>拖动黄条,圆球根据比例运动</h4>
<div id="circle">
<div class="drag_four">
<span class="bar_four"></span>
<strong></strong>
</div>
<div class="move_four">
<span></span>
</div>
</div>
<i>关闭</i>
</li>
<li class="more five">
<h4>鼠标移入左侧,右侧对应放大</h4>
<div id="move_big">
<div id="s">
<img src="img/s.jpg" />
<span id="m"></span>
</div>
<div id="b">
<img src="img/b.jpg" />
</div>
</div>
<i>关闭</i>
</li>
<li class="more six">
<h4>拍卖倒计时,即将拍卖,和正在拍卖</h4>
<div id="count">
<p>XXXX</p>
<span>00:00</span>
</div>
<i>关闭</i>
</li>
<li class="more seven">
<h4>在图片的任何位置滚动鼠标滚轮,图片根据不同位置进行放大或缩小</h4>
<div id="pig">
<img src="img/pig.jpg" height="200" width="200" alt="">
</div>
<i>关闭</i>
</li>
<li class="more eight">
<h4>鼠标移到文字上,右键自定义菜单</h4>
<div id="content_menu">
<p>没有一帆风顺的人生</p>
<p>也没有坐享其成的生活</p>
<p> 所以</p>
<p>当我们独自航行在人生的大海上时</p>
<p>每时每刻都应做好准备</p>
<p>即使遭遇狂风,大浪,暴雨,烈日</p>
<p>也应毫无惧怕</p>
<p>这是一件多么幸福的事啊</p>
<p>因为只有不畏艰辛的人</p>
<p>哈哈哈哈哈哈哈哈</p>
<p>才有机会享受到人生最简单的快乐</p>
<ul id="menu">
<li>整个页面刷新</li>
<li>删除</li>
<li>变红</li>
<li>变绿</li>
<li>变粉</li>
</ul>
</div>
<i>关闭</i>
</li>
<li class="more nine" id="ball">
<h4>以不同的速度拖动小球,小球做减速运动</h4>
<div></div>
<i>关闭</i>
</li>
</ul>
<!-- 九宫格结束 -->
<!-- 无限下拉开始 -->
</section>
<!-- 手风琴开始 -->
<h2>手风琴</h2>
<section id="play" class="play">
<h3>在图片上左右移动鼠标</h3>
<ul>
<li><img src="img/play/1.jpg" width="600"></li>
<li><img src="img/play/2.jpg" width="600"></li>
<li><img src="img/play/3.jpg" width="600"></li>
<li><img src="img/play/4.jpg" width="600"></li>
<li><img src="img/play/5.jpg" width="600"></li>
<li><img src="img/play/6.jpg" width="600"></li>
<li><img src="img/play/7.jpg" width="600"></li>
<li><img src="img/play/8.jpg" width="600"></li>
<li><img src="img/play/9.jpg" width="600"></li>
<li><img src="img/play/5.jpg" width="600"></li>
</ul>
</section>
<!-- 手风琴结束 -->
<!-- 汽车左右拖动开始 -->
<h2>
左右拖动
</h2>
<section class="car" id="car">
<h3>按下鼠标左右拖动</h3>
<ul>
<li><img src="img/car/1.jpg" height="180" width="260" alt=""></li>
<li><img src="img/car/2.jpg" height="180" width="260" alt=""></li>
<li><img src="img/car/3.jpg" height="180" width="260" alt=""></li>
<li><img src="img/car/4.jpg" height="180" width="260" alt=""></li>
<li><img src="img/car/5.jpg" height="180" width="260" alt=""></li>
</ul>
</section>
<!-- 汽车左右拖动结束 -->
<!-- 分页收回开始 -->
<section class="serve" id="serve">
<h2>分页收回</h2>
<h3>连续点击按钮</h3>
<p>点击</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>7</li>
<li>6</li>
<li>8</li>
<li>9</li>
</ul>
</section>
<!-- 分页收回结束 -->
<section>
-----------------------------
</section>
</div>
<a class="download" href="./bin/web前端开发-王东升个人简历.doc">下载简历</a>
<div class="back_top" id="back_top">
返回顶部
</div>
</body>
</html>