-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
176 lines (156 loc) · 5.43 KB
/
index2.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>送给芝芝的毕业礼物</title>
<link rel="stylesheet" href="css/in2.css" />
<script src="js/jquery.js"></script>
<style>
.btn {
width: 100px;
height: 60px;
background-color: green;
color: white;
outline: none;
border: 2px solid green;
border-radius: 15px;
position: absolute;
left: 50px;
/* 调整按钮到右侧 */
top: 10px;
/* 调整按钮位置 */
font-size: 16px;
}
h2 {
text-align: center;
font-size: 30px;
color: #FF8C00;
}
#top {
height: 50px;
}
#footer {
position: relative;
top: 1000px;
height: 40px;
}
.typewriter {
position: fixed;
left: 10px;
top: 100px;
font-size: 20px;
white-space: pre-wrap;
/* 允许保留空白字符 */
overflow: hidden;
}
</style>
</head>
<body>
<h2 id='top'>赵怡芝毕业快乐!</h2>
<audio id="bgm" src="bgm/起风了.mp3" loop="true" hidden="true" controls></audio>
<!-- <button id="play" class="btn">播放</button> -->
<button id="show-text" class="btn" style="right: 110px; top: 10px;">点击查看我给你说的话</button>
<!--/*外层容器*/-->
<div class="wrap">
<!--/*包裹所有元素的容器*/-->
<div class="cube">
<!--前图 -->
<div class="out_front">
<img src="images/1.jpg" class="pic" />
</div>
<!--后图 -->
<div class="out_back">
<img src="images/2.jpg" class="pic" />
</div>
<!--左图 -->
<div class="out_left">
<img src="images/3.jpg" class="pic" />
</div>
<div class="out_right">
<img src="images/4.jpg" class="pic" />
</div>
<div class="out_top">
<img src="images/5.jpg" class="pic" />
</div>
<div class="out_bottom">
<img src="images/6.jpg" class="pic" />
</div>
<!--小正方体 -->
<span class="in_front">
<img src="images/7.jpg" class="in_pic" />
</span>
<span class="in_back">
<img src="images/8.jpg" class="in_pic" />
</span>
<span class="in_left">
<img src="images/9.jpg" class="in_pic" />
</span>
<span class="in_right">
<img src="images/10.jpg" class="in_pic" />
</span>
<span class="in_top">
<img src="images/11.jpg" class="in_pic" />
</span>
<span class="in_bottom">
<img src="images/12.jpg" class="in_pic" />
</span>
</div>
</div>
<h2 id="footer">感谢在2024的南京遇到赵怡芝!</h2>
<!-- 添加打字机效果的文字 -->
<div class="typewriter" id="typewriter">
<p id="typewriter-text"></p>
</div>
<!-- 添加打字机音效 -->
<audio id="typewriter-sound" src="bgm/打字机.mp3"></audio>
<script>
$(document).ready(function () {
// 尝试在页面加载后自动播放BGM
var bgm = document.getElementById("bgm");
var playPromise = bgm.play();
if (playPromise !== undefined) {
playPromise.catch(error => {
// 如果自动播放失败，添加一个用户交互事件以播放BGM
$(document).one('click', function () {
bgm.play();
});
});
}
});
$('#play').click(function () {
$('#bgm')[0].play();
});
$('#show-text').click(function () {
// 开始打字机效果
typeWriter();
});
// 打字机效果的JavaScript实现
var text = `亲爱的芝芝，
在你毕业的这一天，我怀着无比喜悦和骄傲的心情为你送上最真挚的祝福。
我觉得今年最有意义的事情就是在一个风和日丽的下午向你发送那一句消息。
很开心认识你，也很开心你考上研。
希望你在成都度过更加美好的三年。
你就像一颗闪亮的星星，带给我很多欢乐。
无论未来的路途多么未知和挑战重重，
我相信你一定能够以坚定的信念和勇气迎接每一个新起点。
我也会陪着你一起。
共同迎接更美好的明天。
说好了，共同进步的约定。
祝你在新的旅程中一帆风顺，心想事成，永远幸福快乐。
我爱你！
宋章耀，2024/6/14`;
var index = 0;
var speed = 200; // 每个字的显示速度，毫秒
function typeWriter() {
if (index < text.length) {
document.getElementById("typewriter-text").innerHTML += text.charAt(index);
if (text.charAt(index) !== ' ' && text.charAt(index) !== '\n' && text.charAt(index) !== '<' && text.charAt(index) !== '>') {
document.getElementById("typewriter-sound").play();
}
index++;
setTimeout(typeWriter, speed);
}
}
</script>
</body>
</html>