forked from imuncle/gitblog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
98 lines (84 loc) · 3.89 KB
/
404.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
---
permalink: /404.html
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 Not Found</title>
<link rel="icon" href="images/uncle.jpg">
<style>
body,html{margin:0; padding:0;background-color: #f1f1f1}
.bannerWrap{ position:relative; margin:0 auto;width:100%; height:350px; background-color:#ecd6a7; overflow:hidden;}
.bannerWrap img{ display:block; position:absolute;}
</style>
</head>
<body>
<div style="width: 100%;height:100px;background-color: #67b7e2"></div>
<div class="bannerWrap" id="bannerWrap">
<img src="images/house2.png" class="small_house" id="small_house" />
<img src="images/house1.png" class="house" id="house" />
<img src="images/fish.png" style="height:230px;width:auto" class="fish" id="fish" />
<img src="images/404.png" class="info" id="info" />
</div><!--bannerWrap结束-->
<div style="text-align: center;margin-top:100px">
<input type="text" class="search-input" placeholder="回车搜索" style="width: 300px;height: 42px;padding-left: 15px;border-radius: 42px;border: 1px solid rgba(127,140,141,0.6);background: white;outline: none;">
<br><br><br>
<a href="./" style="color: #666666;font-weight: 200;font-size: 20px;text-decoration: none;">回到首页</a>
</div>
<script src = "js/jquery.min.js"></script>
<script type="text/javascript">
$('.search-input').bind('keypress', function (event) {
if (event.keyCode == "13" && $('.search-input').val() != "") {
window.location.href = 'issue_per_label.html?q='+$('.search-input').val();
}
})
$(function(){
var win_w, win_h,b_w, b_h,
small_house, house, fish, info, pToW_w, pToW_h, $img,
temp_p_l, temp_p_t;
var $banner = $("#bannerWrap");
var picArray = "small_house,house,fish,info".split(",");
small_house = { l: 200, t: -140, s: 0.09, isFront: false }, //smallhouse的参数
house = { l: 70, t: -130, s: 0.05, isFront: false }, //house的参数
fish = { l: -100, t: -90, s: 0.02, isFront: true }, //fish的参数
info = { l: -410, t: -110, s: 0.03, isFront: true }; //info的参数
var resetImg = function(){
b_w = $banner.width(); //初始化获取banner宽度
b_h = $banner.height(); //初始化获取banner高度
win_w = $(window).width(); //初始化获取屏幕宽度
win_h = $(window).height(); //初始化获取屏幕高度
pToW_w = $banner.width()/win_w; //初始化获取banner宽度和屏幕宽度的比例
pToW_h = $banner.height()/win_h; //初始化获取banner高度和屏幕高度的比例
$.each( picArray, function(i ,id){ //初始化各图片的位置（相当于鼠标移到屏幕中间时图片的位置）
$img = $("#"+ id);
temp_p_l = pToW_w * eval(id+".s") * win_w/2 ; //这里使用win_w/2是为了模拟鼠标移到屏幕水平中点的效果
temp_p_t = pToW_h * eval(id+".s") * win_h/2 ; //这里使用win_h/2是为了模拟鼠标移到屏幕垂直中点的效果
if(eval(id +".isFront")){
$img.css({"left": b_w/2 + eval(id +".l") + temp_p_l , "top": b_h/2 + eval(id +".t") + temp_p_t });
}else{
$img.css({"left": b_w/2 + eval(id +".l") - temp_p_l , "top": b_h/2 + eval(id +".t") - temp_p_t });
}
})
}
resetImg();
$(window).on("resize",resetImg); //屏幕缩放时重新初始化数据
var changePst = function( pageX, pageY ){
$.each( picArray, function(i ,id){
$img = $("#"+ id);
temp_p_l = pToW_w * eval(id +".s") * pageX ;
temp_p_t = pToW_h * eval(id +".s") * pageY ;
if(eval(id +".isFront")){
$img.css({"left": b_w/2 + eval(id +".l") + temp_p_l , "top": b_h/2 + eval(id +".t") + temp_p_t });
}else{
$img.css({"left": b_w/2 + eval(id +".l") - temp_p_l , "top": b_h/2 + eval(id +".t") - temp_p_t });
}
})
}
$("body,html").mousemove(function(e){
changePst(e.pageX, e.pageY);
})
})
</script>
</body>
</html>