-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (190 loc) · 7.42 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="referrer" content="always"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="theme-color" content="rgb(204,232,207)"/>
<meta name="author" content="王振"/>
<meta name="generator" content="Adobe DreamWeaver CC 2017,Hbuilder"/>
<meta name="keywords" content="HTML, CSS, 个人网页,学生,初级"/>
<meta name="description" content="这是我在大学时期做的个人网页，欢迎访问！限于作者水平，可能效果并不理想，敬请见谅！"/>
<title>欢迎访问</title>
<link rel="shortcut icon" type="image/icon" href="/favicon.ico"/>
<script type="text/javascript">
var index;
if (index = location.href.indexOf("?") > -1) {
location.href = "kill370354.gz01.bdysite.com/" + location.href.substr(index + 1);
}
</script>
<style>
html,
body {
margin: 0 auto;
}
/*适应不同分辨率的屏幕*/
span {
/*倒计时文字，位于左上角*/
position: fixed;
margin: 10px;
}
/*显示倒计时的位置*/
#background {
/*设定放置背景图片的div，之所以不放在body里面，是为了使得背景图片能够拉伸，而如果在body中不能够实现*/
position: absolute;
/*设定放置背景图片的div位置属性*/
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
/*这是为了有背景效果*/
}
#background img {
display: block;
position: absolute;
/*设定背景图片位置属性*/
width: 100%;
/*设定背景图片*/
height: 100%;
top: 0;
/*设定背景图片位置属性*/
left: 0;
}
#centertext {
width: 12em;
height: 180px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0; /*css溢出法*/
margin: auto;
}
.chinese {
/*欢迎文字*/
color: #000;
font-family: "华文行楷", "隶书", "楷体";
/*设置中文字体，防止在各种电脑上不能正常显示，多设置几个字体*/
font-size: 2em;
text-align: center;
overflow: visible;
text-shadow: 1px 1px 1px #111, 1px 1px 1px #222, 1px 1px 1px #333;
/*文字阴影效果*/
}
.english {
/*欢迎文字*/
position: absolute;
font-family: "Times New Roman", Times, serif;
/*设置英文字体*/
font-size: 2em;
text-align: center;
margin: 0 auto;
top: 3em;
bottom: 0;
left: 0;
right: 0; /*css溢出法*/
/*使英文单词居中*/
height: 40px;
width: 200px;
overflow: visible;
}
a:link {
color: rgb(0, 153, 0);
}
a:visited {
color: rgb(82, 124, 106);
}
a:hover {
color: rgb(255, 132, 0);
}
a:active {
color: rgb(0, 0, 0);
}
</style>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b29463c42b922f545c2ae582dcca04c6";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div id="background"><img id="img" src="images/1.jpg"/></div>
<span id="show"></span>
<div id="centertext">
<div class="chinese">欢迎访问我的
<a href="index2.html">个人主页</a>
</div>
<!--欢迎文字-->
<div class="english"><b>WELCOME</b></div>
</div>
<!--欢迎文字-->
<!--下列js代码是从网上复制的-->
<script type="text/javascript">
var t = 5; //设定页面自动跳转的时间
setInterval("refer()", 1000); //启动1秒定时
function refer() {
if (t == 0) {
location = "index2.html"; //#设定跳转的链接地址
return;
}
document.getElementById("show").innerHTML = t + "秒后自动跳转"; // 显示倒计时
t--; // 计数器递减
}
var curIndex = 1; //设定背景图片自动切换
//时间间隔(单位毫秒)，每3秒钟显示一张，数组共有2张图片放在images文件夹下，这两张图片均取自w.qq.com，虽然分辨率高，占用空间却很小，这种技术日后一定要学
var arr = new Array();
arr[0] = "images/1.jpg";
arr[1] = "images/2.jpg";
setInterval(changeImg, 2000);
function changeImg() {
var img = document.getElementById("img");
img.src = arr[(curIndex++) % 2];
}
var oMyHeight = document.body.clientHeight || window.innerHeight;
//alert(oMyHeight); //各浏览器均取前者，均支持document.body.clientHeight属性,IE 6、7、8显示undefined,IE5 有显示
//若要使在body过高时能够实现同时两边上下分离的效果，必须使用window.innerHeight
var oMyWidth = document.body.clientWidth ? document.body.clientWidth : window.innerWidth;
//alert(oMyWidth);
//alert(document.body.clientWidth);//均是浏览器内屏幕宽度，不含滚动条1903
//alert(document.body.clientHeight);//均是body实际高度，不管是否满屏，不含滚动条
//alert(window.innerWidth);//均含滚动条1920
//alert(window.innerHeight);//均取浏览器内屏幕高度，含滚动条不含状态栏
var s = " ";
for(i = 1; i <= 16; i++) {
s = s + ' <div id="i' + i + '" style="z-index:1;width:100px;height:' + oMyHeight + '%;position:fixed;left:0px;top:0px;background-image: url(images/1.jpg); background-position:' + (i - 1) * 100 / 16 + '% 0%; background-repeat:no-repeat; "></div>'; //原本想设置合适宽度的背景，使div集合与真实背景图片相融合，但是需要拉伸，且那样的话可能 看不出来div变化，所以如此而已
}
document.body.innerHTML += s;
var speed = 5;
var temp = new Array();
var a = document.getElementsByTagName("body")[0];
var oMyTop = 0;
for (i = 1; i <= 16; i++) {
temp[i] = document.getElementById("i" + i);
temp[i].style.width = oMyWidth / 16 + "px";
temp[i].style.height = oMyHeight + "px";
temp[i].style.left = (i - 1) * oMyWidth / 16 + "px";
}
function kind() {
oMyHeight -= speed;
for (i = 1; i <= 16; i = i + 2) {
temp[i].style.clip = "rect(auto,auto," + oMyHeight + "px," + "auto)";
}
oMyTop += speed;
for (i = 2; i <= 16; i = i + 2) {
temp[i].style.clip = "rect( " + oMyTop + "px" + ",auto,auto,auto)";
}
if (oMyHeight <= 0) clearInterval(time);
}
time = setInterval(kind, 15); //div缓慢消失
</script>
<script src="js/xhr.js"></script>
<script src="js/statistics.js"></script>
</body>
</html>