forked from xwdoor/LoveRecord
-
Notifications
You must be signed in to change notification settings - Fork 0
/
iloveu.html
213 lines (205 loc) · 12.8 KB
/
iloveu.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Love between Us</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<audio src="./music.mp3" autoplay="true" loop="loop"></audio>
<div id="back">
<div class="mask"></div>
<!-- 设置展示的图片，github pages不能有后台程序只能一条一条手动添加了 囧 -->
<div id="carousel" class="carousel slide carousel-fade carousel-position">
<div class="carousel-inner" style="width: 100%;height: 100%;" id="background">
<div class="item active" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background:url(./img/1.PNG);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/2.JPG) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/3.png) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/4.JPG) ;background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/5.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/6.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/7.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/8.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/9.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/10.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/11.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/12.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/13.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/14.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/15.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/16.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/17.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/18.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/19.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/20.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/21.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/22.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/23.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/24.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/25.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/26.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/27.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/28.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/29.png);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/30.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/31.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/32.jpg);background-size: cover;"></div>
</div>
<div class="item" style="width: 100%;height: 100%;">
<div style="width: 100%;height: 100%;background-image: url(./img/end.png);background-size: cover;"></div>
</div>
</div>
</div>
</div>
<div class="modal show" style="top:24%;">
<div class="modal-dialog" style="opacity: .9">
<div class="modal-content" style="opacity:.85">
<div class="modal-header">
<h1 class="text-center" style="color: #A94442;font-family: 'JournalRegular', Arial, sans-serif;font-size: 7rem;">the times we together</h1>
<p class="text-center small-title">Johnny & Dawn</p>
<p class="text-center small-title">LOVING ON THE WAY</p>
</div>
<div class="modal-body text-center" style="line-height: 1.5rem;font-family: 'JournalRegular', Arial, sans-serif;font-size: 3rem;">
<p>
<span id="day" class="time-font"></span><span style="color:#A94442">/ </span><span id="hour" class="time-font"></span><span style="color:#A94442">/ </span><span id="minute" class="time-font"></span><span style="color:#A94442">/ </span><span id="second" class="time-font"></span>
</p>
<p>
days/hours/min/sec
</p>
<p class="text-center" style="color:#A94442;font-size: 17px" id="say"></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/count-time.js"></script>
<script>
$(function() {
//设置起始日期
countTime('2016/01/30 23:45', 'day', 'hour', 'minute', 'second');
var days = $('#day').text();
// 设置标题
if (parseInt(days / 365) != 0) {
$(document).attr("title", "在一起" + parseInt(days / 365) + "年,感谢相伴。");
} else if (parseInt(days / 30) != 0) {
$(document).attr("title", "在一起" + parseInt(days / 30) + "个月,感谢相伴。");
} else
$(document).attr("title", "在一起" + days + "天,感谢相伴。");
//设置每一张图片对应的文字
var says = new Array(
"一路相伴,感谢有你",
"走过很多路，拍过很多照片，却只爱了一个人",
"福州,乐咖乐。 爱看你吃饭的样子",
"惊慌失措可爱的小表情",
"福州，农林大学。 一起去看花，牵着手走过花海",
"你是我这一生最美的桃花味麦旋风",
"宁德，太姥山。 一早却比一世还长情",
"丢在许愿池的那个愿望一定实现了吧",
"福州，西湖公园。你在身边，你就是我最美的西湖",
"福州，旋转寿司。食力战将非我们莫属",
"福州，福大外国语学院。到此一游",
"福州，第五大道。爱过这里的披萨，腻了全世界的披萨",
"福州，福州大学图书馆。快毕业了才发现学校那么美，如你一般。",
"福州，西禅寺。求了几辈子的佛，我们终于在一起了",
"福州，福大学生街。一起看到了彩虹，传说，那样会很幸福",
"宁德，太姥山。车上的照片也能拍得很美啊",
"福州，福大金阁寺。你告诉我那是金阁寺所以我至今不知道它真正叫什么",
"福州，EO。你说要减肥，所以我们走进了万科广场的EO",
"福州，中亭街。草莓派很甜，我却能大块吃下去，厉害吧",
"福州，爱琴海。躲在我后面，我保护你",
"福州，爱琴海。我也终于有不进衣服店的理由了！",
"福州，爱琴海。和我一样大的熊",
"福州，爱琴海。再见了，爱琴海给我们带来快乐的地方",
"福州，博士后广场。四年，我们学校的乐园",
"福州，豆花新语。终于，我们毕业了，还好我们依然在一起",
"厦门，前埔。奶茶与你，很搭哦",
"厦门，前埔。躲在墙角偷偷拍照，嘿嘿",
"厦门，火车站。发现新天地了",
"厦门，五缘湾。五缘湾的夕阳，好美",
"惠安，无名街道。好想带你走遍我活了十几年的地方",
"厦门，软件园。原来七夕可以这么简单，一幅画，一句情话，幸福",
"厦门，软件园。我也开始喜欢上画画了，画很多很多的你",
"时间不停，爱你不止，携子之手，白头偕老"
);
var start = function() {
var index = 0;
var rate = 6000;
$('#say').text(says[(index++) % says.length]);
var _play = function () {
$('#say').hide();
$('#say').text(says[(index++) % says.length]);
$('#say').fadeToggle();
$('#carousel').carousel('next');
};
setInterval(_play, rate);
}();
});
</script>
</body>
</html>