-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
317 lines (308 loc) · 12.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>小汪同学</title>
<meta name="language" content="zh-CN" />
<meta name="title" content="小汪同学" />
<!-- <link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png" /> -->
<link type="text/css" rel="stylesheet" href="css/theme.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script src="js/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="div_container">
<!-- 最外层div，用于居中兼容PC和移动 -->
<div id="div_start_bg"></div>
<div id="div_onlyyou">
<!-- 用于设置背景 -->
<div id="div_oy_inner">
<!-- 用于存放content -->
<div class="div_oy_text">
<img title="手势" src="./images/1.gif" />
<p class="p_oy_text"></p>
<ul id="ul_oy_benefit">
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit" style="font-size: 30px;font-weight: 800;">汪宇芩，做我女朋友好不好？</li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
</ul>
</div>
<li onclick="oy_show_benefit()" class="go-next">点击继续</li>
<ul id="ul_oy_btn">
<li onclick="oy_go_next()">Yes ❤</li>
<li onclick="oy_show_note()">No ✖</li>
</ul>
<div id="div_oy_note" onclick="oy_hide_note()">
<img src="images/emoji_kelian.jpg" alt="" /><br />后面还有更多未说完的话，告诉我yes!
<div id="div_oy_note_close">✖</div>
</div>
<div id="div_oy_yes"><img src="images/emoji_bixin.jpg" alt="" /><br />太好了！哈哈~</div>
</div>
</div>
<div class="div_pure_words">
<div class="div_pure_words_bg">
<div class="div_pure_words_height"></div>
</div>
<div class="div_pw_typed">
<span id="span_pw_typed"></span>
</div>
</div>
<div id="div_btn_container">
<div id="div_btn_inner">
<div class="div_music_tips"></div>
<div class="div_btn" id="div_music">
<!-- 音乐按钮部分 -->
<img id="img_music" src="images/music_note_big.png" style="-webkit-animation: music_play_rotate 1s linear infinite" />
<!-- 你的浏览器不支持播放音乐 -->
<audio id="audio_music" autoplay="autoplay" loop="loop">
<source type="audio/mpeg" />
</audio>
</div>
<div class="div_record_tips"></div>
<div class="div_btn" id="div_record">
<audio id="audio_record" loop="loop">
<source type="audio/mpeg" />
</audio>
</div>
</div>
</div>
</div>
<script>
//判断客户端设备，选择写入meta
function init_viewport() {
if (navigator.userAgent.indexOf('Android') != -1) {
var version = parseFloat(RegExp.$1)
if (version > 2.3) {
var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth
var phoneScale = parseInt(width) / 500
document.write('<meta name="viewport" content="width=500, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">')
} else {
document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">')
}
} else if (navigator.userAgent.indexOf('iPhone') != -1) {
var phoneScale = parseInt(window.screen.width) / 500
document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=0" /> ') //0.75 0.82
} else {
document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> ') //0.75 0.82
}
}
init_viewport()
var theme = 'pure_words'
console.log('theme ->' + theme)
var theme_content = {
pure_words_content:"我不善言辞，在感情方面更是白纸一张，却在见到你的第一眼时我对你就有了一种与众不同的感觉。\n直到今年秋招期间，我和你有了更多的交流。\n慢慢的，我发现当和你聊天时我会莫名的高兴；\n当你在忙不回我消息时，我会莫名的焦急；\n当你心情不好时，我会想尽办法去安慰你；\n当这种现象越来越多的时候，我发现，我好像喜欢上了你。\n我们即将毕业，在我朋友们的鼓励下，我决定鼓起勇气，孤注一掷。幸好，你没有让我留下遗憾。\n虽然因为疫情，我们约定的很多事情都还没来得及一起去完成，但现在我们有足够的时间去一件一件的完成更多的事情。\n小汪同学，从现在开始，我会让你知道，时间也没有什么了不起，因为我会爱你永永远远。<um style='color: #F44336;'></um>",
typed_bool: 'typed_y',
cursor_char: 'cursor_heart',
bg_style_pure_words: 'bg_opacity',
bg_img: 'images/3.jpg',
simple_page_content: '',
video_page_content: '',
}
console.log(theme_content)
var music_json = {
music_select: 'm_online',
m_online_id: '7',
m_online_url: 'images/1.mp3',
m_upload_name: 'null',
m_upload_url: 'null',
}
console.log(music_json)
var record_json = {
record_bool: 'r_false',
r_wechat_time: 'null',
r_wechat_url: 'null',
r_wechat_amr: 'null',
}
console.log(record_json)
var main_title = '我喜欢你❤️'
// console.log(main_title);
if (main_title == '' || main_title == 'null') {
//允许标题为空
document.title = '慢慢喜欢你'
}
var window_height = $(window).height()
console.log('window_height ->' + window_height)
var pure_words_content = theme_content['pure_words_content']
var str_cursorChar
var typed_bool
var interval_pw_height
var height_div_pw = $('.div_pure_words_height').height()
function init_pure_words() {
$('.div_pure_words_height').html(pure_words_content + '22222') //初始化复制内容，撑开文档高度
// 初始化设置div的bg图片 初始化设置div的bg图片
if (typeof theme_content['bg_style_pure_words'] != 'undefined' && theme_content['bg_style_pure_words'] == 'bg_opacity') {
if (typeof theme_content['bg_img'] != 'undefined' && theme_content['bg_img'] != '') {
$('.div_pure_words_bg').css({
'background-image': 'url(' + theme_content['bg_img'] + ')',
// 'background-repeat': 'no-repeat',
// 'background-size': 'cover',
// overflow: 'hidden',
})
}
}
//以下是打字效果的js
if (typeof theme_content['cursor_char'] != 'undefined' && theme_content['cursor_char'] != '') {
switch (
theme_content['cursor_char'] //设置打字光标的样式
) {
case 'cursor_heart':
str_cursorChar = '<um style="color: #F44336;">❤</um>'
break
case 'cursor_sub':
str_cursorChar = '_'
break
case 'cursor_music':
str_cursorChar = '♫'
break
case 'cursor_star':
str_cursorChar = '★'
break
case 'cursor_sun':
str_cursorChar = '☀'
break
default:
str_cursorChar = '|'
}
} else {
//处理全新作品，默认显示打字效果
str_cursorChar = '❤'
}
//判断用户有没有选择打字效果
if (typeof theme_content['typed_bool'] != 'undefined' && theme_content['typed_bool'] != '') {
typed_bool = theme_content['typed_bool'] == 'typed_y' ? true : false
} else {
typed_bool = false //默认显示打字效果
}
display_pure_words()
$('.div_pure_words').fadeIn()
interval_pw_height = setInterval(function () {
console.log('div_pure_words_height -> ' + $('.div_pure_words_height').height())
var least_height_div_pw = $('.div_pure_words_height').height()
if (least_height_div_pw > height_div_pw) {
height_div_pw = least_height_div_pw
} else {
clearInterval(interval_pw_height)
$('.div_pure_words_height').height(least_height_div_pw + 100)
if ($('.div_pure_words_height').height() < window_height) {
$('.div_pure_words_height').height(window_height) //不能小于窗口的高度
console.log('let us be high as window')
}
}
}, 100)
}
function display_pure_words() {
if (typed_bool) {
var typed_pure_words = new Typed('#span_pw_typed', {
strings: [pure_words_content],
//输入内容, 支持html标签
typeSpeed: 120,
//打字速度
cursorChar: str_cursorChar,
//替换光标的样式
contentType: 'html',
//值为html时，将打印的文本标签直接解析html标签
onComplete: function (abc) {
// console.log(abc);
console.log('finished typing words')
// console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
},
})
} else {
//如果不需要打字效果就直接显示
$('#span_pw_typed').html(pure_words_content).fadeIn()
}
init_attachment()
}
var start_content = {
chase_title: "做我女朋友好不好<um style='color: #F44336;'>！</um>",
chase_text: "I choose you. And I'll choose you, over and over and over. Without pause, without a doubt, in a heartbeat. I'll keep choosing you.<um style='color: #F44336;'>💕</um>",
chase_benefit: [
'世界这么大，我却遇到了你，真好',
'你是我的心头一热，也是我的不动声色',
'我不会表白，我也不会套路',
'我只想想牵你的手，一起走进日常的生活点滴，和我未来的规划里',
'我想给你很多东西，陪伴，理解，信任，支持，最想给你的是偏爱',
'汪宇芩，做我女朋友好不好？',
],
bg_style: 'bg_custom',
bg_img: 'images/2.jpg',
img_bool: 'img_true',
img_src: 'images/1.gif',
} //可能为null
var start_id
$(function () {
//此事件为触发互动创意
start_id = 'onlyyou' //可能为null
init_start(start_id)
})
function init_start(start_id) {
console.log('init_start ->' + start_id)
switch (start_id) {
case 'loveformat':
$('.div_loveformat').show()
init_loveformat()
break
case 'hearttree':
$('#div_hearttree').show()
init_hearttree()
break
case 'courage':
$('#div_courage').show()
init_courage()
break
case 'birthdaycake':
$('#div_dbcake').show()
init_birthdaycake()
break
case 'intersect':
$('#div_intersect').show()
init_intersect()
break
case 'onlyyou':
$('#div_onlyyou').show()
init_onlyyou()
break
default:
init_theme()
}
}
//开始动画主体部分
function init_theme() {
console.log('init_theme')
$('#div_start_bg').fadeOut()
init_pure_words()
}
var attachment = 'null' //可能为null
var attached_content = {
bool_save: false,
} //可能为null
console.log(attached_content)
function init_attachment() {
//开始attachment
console.log('init_attachment ->' + attachment)
switch (attachment) {
case 'timer':
init_at_timer()
break
default:
return
}
}
</script>
<!-- JQuery -->
<script src="js/typed.min.js"></script>
<script src="js/start_onlyyou.js"></script>
<script src="js/jweixin-1.2.0.js"></script>
<script src="js/theme_common.js"></script>
</body>
</html>