-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
399 lines (398 loc) · 15.3 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
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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ann-Cyq</title>
<link rel="stylesheet" type="text/css" href="./lib/css/index.css">
<link rel="stylesheet" type="text/css" href="./lib/css/typing.css">
<script type="text/javascript" src="./lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./lib/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./lib/js/jquery.color.js"></script>
<script type="text/javascript" src="./lib/js/typing.min.js"></script>
<script type="text/javascript" src="./lib/js/swiper-3.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/swiper-3.4.2.min.css">
<style type="text/css">
#page .icon{
width: 42px;
height: 58px;
background-image: url('./src/images/player@2x.png');
background-position:-56px 0;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
transform: scale(0.5);
cursor: pointer;
}
</style>
</head>
<body>
<div id="page">
<audio id="audio" src="./src/Colbie Caillat-Try.mp3"></audio>
<div class="icon"></div>
<ul class="location">
<li>
<div class="content">
<div class="introduce">
<div class="title">
<h2>个人简介</h2>
</div>
<div class="w">
<div id="src_introduce">
                        <h3 >姓名:陈永全</h3>                                          <h3 style="display:inline">求职：Web前端开发</h3>
<br /><br />
       Phone：15260630610         E-mail: 729065993@qq.com        WeChat: cyq19940401
<br /><br />
            
<h3 style="display:inline">专业技能:</h3>
<br />
                        
• 掌握： HTML、CSS、HTML5、CSS3、FlexBox、JavaScript、jQuery、
<br />
                        
      
Ajax、Fetch、Bootstrap、React、React-Native、微信小程序
<br />
                        
• 一般： Node.js、Angular、Vue、Less、Swiper.js、WOW.js、Animate.css、
<br />
                        
      
ionic、phonegap、Gulp.js、Git、MySQL、Android
<br /><br />
            
<h3 style="display:inline">自我评价:</h3>
<br />
                        
1.在高中时期，锻炼了学习能力及自学能力;
<br />
                        
2.在大学期间，培养了我较强的组织能力和较强的责任心。课堂时间学习专业知识，课余时间课堂增强知识，完善各个方面的能力。
<br />
                        
3.遇事肯专研，为人乐观向上，积极进取；喜欢阅读，喜欢游泳，享受逻辑性思考；学习前端，偏爱后端，喜欢有奋斗进取的公司氛围。
</div>
<div id="output-wrap">
<span id="output"></span>
<span class="typing-cursor">|</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="content">
<div class="project1">
<div class="title">
<h2>React-Native 仿美团APP界面开发</h2>
</div>
<div class="w">
<div id="src_project1">
    
<h3>项目介绍:</h3>
<br />
            
该项目主要是用美团提供的开放数据API，以React-Native为主要框架实现了对仿照美团APP页面的开发：
<br />
                
1.采用React.js框架实现组件化开发;
<br />
                
2.采用FlexBox技术栈实现界面元素布局;
<br />
                
3.以React-Native自带的ScrollView实现广告图和界面上下的滑动;
<br />
                
4.以React-Native自带的ListView实现大量数据的列表;
<br />
                
5.使用Fetch来进行网络请求,实现对数据的获取;
<br />
                
6.使用第三方包react-native-deprecated-custom-components实现页面跳转;
<br />
                
7.使用第三方包react-native-pull实现下拉刷新;
<br />
                
8.使用Node.js对Mysql数据库的操作和对数据的处理实现简单的界面登陆
<br />
    
<h3>项目托管:</h3>
<br />
                
<a style="color:#fefefe;text-decoration:underline" href="https://github.com/Ann-Cyq/MeiTuan-RN">https://github.com/Ann-Cyq/MeiTuan-RN</a>
<br />
    
<h3>项目展示:</h3>
</div>
<div id="output-wrap">
<span id="output_project1"></span>
<span class="typing-cursor">_</span>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<p class="cancle">点击关闭</p>
<div class="swiper-slide"><img src='./src/images/meituan_001.png'></div>
<div class="swiper-slide"><img src='./src/images/meituan_002.png'></div>
<div class="swiper-slide"><img src='./src/images/meituan_003.png'></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="content">
<div class="project2">
<div class="title">
<h2>其他小项目</h2>
</div>
<div class="w">
<div id="src_project2">
    
<h3>环球小镇 微信小程序界面开发</h3>
<br />
    
<h3>职责描述:</h3>
<br />
            独立完成小程序页面制作、熟练使用小程序自带的API进行实现导航条、界面跳转、广告图轮播、上下滑动等一系列开发，以及使用小程序require API进行服务端请求数据;
<br />
    
<h3>项目简介:</h3>
<br />
            
该项目主要是采用微信小程序提供的view、scrollview、swiper、navigator、slider
<br />
progress等一系列组件，以及require、setStorage、onPullDownRefresh等一系列API进行开发。
<br />
    
<h3>项目托管:</h3>
<br />
            
<a style="color:#fefefe;text-decoration:underline" href="https://github.com/Ann-Cyq/--wechat">https://github.com/Ann-Cyq/--wechat</a>
<br /><br />
    
<h3>智能二维码门禁系统 Android程序开发</h3>
<br />
    
<h3>项目简介:</h3>
<br />
            主要功能流程是当人员需要进入门禁管制点时，将手机、平板电脑等接收到的二维码对准采集器，通过采集器上传到控制器，控制器通过调用数据库信息判断人员身份合法性，若通过认证，门自动打开并且此二维码的权限注销，下次访问需要重新生成新的二维码，同时还可以给来访人员送上指定的二维码，若非法或非使用时间段，禁止进入。同时，事件记录上传至管理电脑显示并存储（例如人员信息、进门时间等）
<br />
</div>
<div id="output-wrap">
<span id="output_project2"></span>
<span class="typing-cursor">*</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="content">
<div class="thanks">
<h2>最后用我们家女神的生活照来感谢观看~</h2>
</div>
<div class="pic_3D">
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<i class="i_front"></i>
<i class="i_back"></i>
<i class="i_top"></i>
<i class="i_bottom"></i>
<i class="i_left"></i>
<i class="i_right"></i>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="guide">
<li><a>Person</a></li>
<li><a>Project</a></li>
<li><a>Project</a></li>
<li><a>Thanks</a></li>
</ul>
</div>
<script type="text/javascript">
// 先获取当前的可视窗口高度给背景设置高度
var screenHeight = $(document).height();
// 设置一个变量用来索引当前位置
var pageIndex = 0;
// 定义一个zindex
var zIndex = 0;
// 定义一个数组用于保存打字对象
var typeArr = [];
// 定义页面的打字程序
typeWrite('src_introduce','output');
typeWrite('src_project1','output_project1');
typeWrite('src_project2','output_project2');
// 对一些元素初始化高度和定位
$('#page').css('height',screenHeight);
$('.location>li').css('top',-screenHeight);
$('.location>li').eq(0).css('top',0);
$('.guide>li').eq(pageIndex).children().css({
fontSize: 30,color: '#fefefe'});
typeArr[0].start();
typeArr.splice(0,1);
typeArr.unshift('0');
// 定义音乐播放事件
var audio = document.querySelector('#audio');
audio.loop = true;
audio.play();
// 播放器点击事件
$('.icon').on('click',function(){
if (audio.paused == false) {
$('.icon').css('backgroundPosition','0 0');
audio.pause();
}else{
$('.icon').css('backgroundPosition','-56px 0');
audio.play();
}
});
// 滚轮事件
$(window).on("mousewheel",function(e,delta){
if (delta == -1) {
pageIndex++;
if (pageIndex>3) {
pageIndex = 3;
}else{
handlePage();
// 点击哪个页面就执行对应的打字程序
typeArr[pageIndex].start();
typeArr.splice(pageIndex,1,'0');
if (pageIndex == 1) {
// 设置项目展示自动弹出
setTimeout(function(){
$('.swiper-container').fadeIn('slow');
// 页面二的图片展示
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
}, 20000);
};
}
}else if(delta == 1){
pageIndex--;
if (pageIndex < 0) {
pageIndex = 0;
}else{
handlePage();
// 点击哪个页面就执行对应的打字程序
typeArr[pageIndex].start();
typeArr.splice(pageIndex,1,'0');
if (pageIndex == 1) {
// 设置项目展示自动弹出
setTimeout(function(){
$('.swiper-container').fadeIn('slow');
// 页面二的图片展示
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
}, 20000);
};
}
}
});
// 设置导航器的点击事件
$('.guide>li').on("click",function(){
if ($(this).index() != pageIndex) {
pageIndex = $(this).index();
handlePage();
// 点击哪个页面就执行对应的打字程序
typeArr[pageIndex].start();
typeArr.splice(pageIndex,1,'0');
if (pageIndex == 1) {
// 设置项目展示自动弹出
setTimeout(function(){
$('.swiper-container').fadeIn('slow');
// 页面二的图片展示
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
}, 20000);
};
}
});
// 导航器的触摸和离开事件
$('.guide>li').on("mouseover",function(){
$(this).children().stop().animate({
"color": "#FEFEFE",
fontSize: 30}, 500)
});
$('.guide>li').on("mouseleave",function(){
if ($(this).index() != pageIndex) {
$(this).children().stop().animate({
"color": "#ccc",
fontSize: 18}, 500)
};
});
// 设置第二页面中图片展示的取消事件
$('.cancle').on('click',function(){
$('.swiper-container').fadeOut('slow');
});
// 定义一个处理页面的函数
function handlePage(){
zIndex++;
$('.location>li').eq(pageIndex).css({
"zIndex":zIndex,
top:-screenHeight
});
$('.location>li').eq(pageIndex).stop().animate({top:0}, 800);
$('.guide>li').children().css({
fontSize: 18,
color: '#ccc'
});
$('.guide>li').eq(pageIndex).children().css({
fontSize: 30,
color: '#fefefe'
});
}
// 定义一个打字的函数
function typeWrite(sourceId,outputId){
var typing = new Typing({
source: document.getElementById(sourceId),
output: document.getElementById(outputId),
delay: 20
});
typeArr.push(typing);
}
</script>
</body>
</html>