Skip to content

Commit cc48abd

Browse files
zhouxiaotianzhouxiaotian
committed
push content
1 parent d7eae71 commit cc48abd

File tree

3 files changed

+294
-2
lines changed

3 files changed

+294
-2
lines changed

‎WEEK8/RESUME/css/index.less‎

Lines changed: 131 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ html {
77

88
html, body {
99
.full-page;
10+
position: relative;
11+
z-index: -4;
1012
}
1113

1214
.container {
1315
.full-page;
16+
position: relative;
17+
z-index: -3;
1418
margin: 0 auto;
1519
max-width: 640px;
1620
}
@@ -91,4 +95,130 @@ html, body {
9195
100% {
9296
background-position: 0 0;
9397
}
94-
}
98+
}
99+
100+
/*--PHONE--*/
101+
.phone {
102+
.full-page;
103+
display: none;
104+
position: relative;
105+
z-index: -2;
106+
background: url("../img/zf_phoneBg.jpg") no-repeat;
107+
background-size: cover;
108+
109+
.title {
110+
margin-top: .5rem;
111+
112+
img {
113+
display: block;
114+
margin: 0 auto;
115+
width: 2.62rem;
116+
height: 1.25rem;
117+
}
118+
119+
span {
120+
display: none;
121+
margin-top: .1rem;
122+
line-height: .3rem;
123+
text-align: center;
124+
color: #FFF;
125+
font-size: .3rem;
126+
letter-spacing: .05rem;
127+
}
128+
}
129+
130+
.listen {
131+
position: absolute;
132+
left: 50%;
133+
margin-left: -2.6rem;
134+
bottom: .3rem;
135+
width: 5.2rem;
136+
height: 3.6rem;
137+
background: url("../img/zf_phoneListen.png") no-repeat;
138+
background-size: 100% 100%;
139+
140+
.touch {
141+
box-sizing: border-box;
142+
position: absolute;
143+
right: -.06rem;
144+
bottom: .48rem;
145+
z-index: 999;
146+
width: 1.6rem;
147+
height: 1.6rem;
148+
}
149+
150+
.move {
151+
.touch;
152+
border: .03rem solid #0F0;
153+
border-radius: 50%;
154+
z-index: -1;
155+
156+
.animation(@name: phoneMove,@timing-function: linear,@count: infinite);
157+
}
158+
}
159+
160+
.detail {
161+
position: absolute;
162+
bottom: .3rem;
163+
left: 50%;
164+
margin-left: -2.6rem;
165+
width: 5.2rem;
166+
height: 6.59rem;
167+
background: url("../img/zf_phoneDetail.png") no-repeat;
168+
background-size: 100% 100%;
169+
170+
-webkit-transform: translateY(6.89rem);
171+
transform: translateY(6.89rem);
172+
.transition(@duration: .3s);
173+
174+
.touch {
175+
position: absolute;
176+
bottom: .28rem;
177+
left: 50%;
178+
margin-left: -.8rem;
179+
z-index: 999;
180+
width: 1.6rem;
181+
height: 1.6rem;
182+
}
183+
}
184+
}
185+
186+
@-webkit-keyframes phoneMove {
187+
0% {
188+
-webkit-transform: scale(1.2);
189+
transform: scale(1.2);
190+
}
191+
100% {
192+
-webkit-transform: scale(0);
193+
transform: scale(0);
194+
}
195+
}
196+
197+
@keyframes phoneMove {
198+
0% {
199+
-webkit-transform: scale(1.2);
200+
transform: scale(1.2);
201+
}
202+
100% {
203+
-webkit-transform: scale(0);
204+
transform: scale(0);
205+
}
206+
}
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+

‎WEEK8/RESUME/index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,98 @@ <h3>H5场景创意交互型简历</h3>
3535
</div>
3636
</section>
3737

38+
<!--PHONE-->
39+
<section class="phone">
40+
<div class="title">
41+
<img src="img/zf_phoneLogo.png" alt="">
42+
<span>00:00</span>
43+
</div>
44+
<div class="listen">
45+
<div class="move"></div>
46+
<div class="touch"></div>
47+
</div>
48+
<div class="detail">
49+
<div class="touch"></div>
50+
</div>
51+
<audio src="audio/bell.mp3" preload="none" id="bellAudio" loop></audio>
52+
<audio src="audio/say.mp3" preload="none" id="sayAudio"></audio>
53+
</section>
54+
55+
<!--MESSAGE-->
56+
<section class="message">
57+
<ul class="wrapper">
58+
<li class="student">
59+
<img src="img/zf_messageStudent.png" alt="">
60+
<i></i>
61+
哎，毕业了，工作还遥遥无期，好愁啊！
62+
</li>
63+
<li class="teacher">
64+
<img src="img/zf_messageLogo.png" alt="">
65+
<i></i>
66+
怎么会？认识我的毕业生一个月都拿一万多的好工作呢!
67+
</li>
68+
<li class="teacher">
69+
<img src="img/zf_messageLogo.png" alt="">
70+
<i></i>
71+
是不是没学HTML5和移动端?
72+
</li>
73+
<li class="student">
74+
<img src="img/zf_messageStudent.png" alt="">
75+
<i></i>
76+
都学了啊,可我还是找不到工作?
77+
</li>
78+
<li class="teacher">
79+
<img src="img/zf_messageLogo.png" alt="">
80+
<i></i>
81+
那就是HTML5的核心基础JS编程学的不够扎实，只顾花哨的效果了。原生JavaScript功夫是王道啊!
82+
</li>
83+
<li class="teacher">
84+
<img src="img/zf_messageLogo.png" alt="">
85+
<i></i>
86+
还有就是现在的前端开发已经工程化了，像angular、react、node、webpack这些也要学，这些才是现在互联网开发的大势所趋！
87+
</li>
88+
<li class="teacher">
89+
<img src="img/zf_messageLogo.png" alt="">
90+
<i></i>
91+
原生JavaScript编程基础要精，像react之类的前端高级框架要熟，所以认识我的同学，工资普遍在12K以上！
92+
</li>
93+
<li class="student">
94+
<img src="img/zf_messageStudent.png" alt="">
95+
<i></i>
96+
啊？竟然有这么大差距呢！
97+
</li>
98+
<li class="student">
99+
<img src="img/zf_messageStudent.png" alt="">
100+
<i></i>
101+
这些东西我都不知道呢！真高兴认识了你！那我应该怎么办呢？
102+
</li>
103+
<li class="teacher">
104+
<img src="img/zf_messageLogo.png" alt="">
105+
<i></i>
106+
来珠峰培训学这些知识！
107+
</li>
108+
<li class="teacher">
109+
<img src="img/zf_messageLogo.png" alt="">
110+
<i></i>
111+
珠峰培训七年专注前端培训，全国闻名的HTML5培训学校。
112+
</li>
113+
<li class="teacher">
114+
<img src="img/zf_messageLogo.png" alt="">
115+
<i></i>
116+
详细的信息你看接下来的介绍吧。
117+
</li>
118+
<li class="student">
119+
<img src="img/zf_messageStudent.png" alt="">
120+
<i></i>
121+
好的！
122+
</li>
123+
</ul>
124+
<div class="keyboard">
125+
<span class="text">都学了啊，可我还是找不到好工作！</span>
126+
<a href="javascript:;" class="submit"></a>
127+
</div>
128+
</section>
129+
38130

39131
</main>
40132

‎WEEK8/RESUME/js/index.js‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,82 @@ let loadingRender = (function () {
9797

9898
/*--PHONE--*/
9999
let phoneRender = (function () {
100+
let $phone = $('.phone'),
101+
$listen = $phone.find('.listen'),
102+
$listenTouch = $listen.find('.touch'),
103+
$detail = $phone.find('.detail'),
104+
$detailTouch = $detail.find('.touch'),
105+
$time = $phone.find('span');
106+
107+
let bellAudio = $('#bellAudio')[0],
108+
sayAudio = $('#sayAudio')[0];
109+
110+
function listenTouch() {
111+
$listenTouch.singleTap(function () {
112+
bellAudio.pause();
113+
$(bellAudio).remove();
114+
115+
$listen.remove();
116+
$detail.css('transform', 'translateY(0)')
117+
.on('webkitTransitionEnd', function () {
118+
//->TRANSITION动画结束
119+
//JS中控制CSS3属性,只写一套加前缀的即可
120+
$time.css('display', 'block');
121+
sayAudio.play();
122+
watchTime();
123+
});
124+
});
125+
}
126+
127+
let watchTimer = null;
128+
129+
function watchTime() {
130+
watchTimer = setInterval(()=> {
131+
var curTime = sayAudio.currentTime,
132+
durTime = sayAudio.duration;
133+
if (curTime >= durTime) {
134+
message();
135+
return;
136+
}
137+
var minute = Math.floor(curTime / 60),
138+
second = Math.ceil(curTime - minute * 60);
139+
minute < 10 ? minute = '0' + minute : null;
140+
second < 10 ? second = '0' + second : null;
141+
$time.html(minute + ':' + second);
142+
}, 1000);
143+
}
144+
145+
function message() {
146+
clearInterval(watchTimer);
147+
sayAudio.pause();
148+
$(sayAudio).remove();
149+
$phone.remove();
150+
messageRender.init();
151+
}
152+
100153
return {
101154
init: function () {
155+
$phone.css('display', 'block');
156+
157+
//->PLAY BELL
158+
bellAudio.play();
102159

160+
//->LISTEN TOUCH
161+
listenTouch();
162+
163+
//->DETAIL TOUCH
164+
$detailTouch.singleTap(message);
103165
}
104166
}
105167
})();
106168

169+
/*--MESSAGE--*/
170+
let messageRender = (function () {
171+
return {
172+
init: function () {
173+
174+
}
175+
}
176+
})();
107177

108-
loadingRender.init();
178+
messageRender.init();

0 commit comments

Comments
 (0)