-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·123 lines (108 loc) · 3.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<title>vip8</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="warp" id="warp">
<div id="main">
<section class="page2 active">
<img src="img/logo (1).png" class="_logo animated">
<img src="img/gray-logo.png" class="gray-logo animated fadeOut">
<div id="input">
<div></div>
</div>
</section>
<section class="page3">
<img src="img/font.png" class="font animated bounceInUp">
<img src="img/light (1).png" class="font animated feedIn">
</section>
<section class="page1">
<img src="img/font(1).png" class="font1 animated bounceInUp">
<img src="img/light (2).png" class="font animated feedIn">
</section>
<section class="page4">
<img src="img/font(2).png" class="font2 animated bounceInUp">
<img src="img/light (3).png" class="font animated feedIn">
</section>
<section class="page5">
<img src="img/font(3).png" class="font3 animated bounceInUp">
</section>
<section class="page6">
<img src="img/logo.png" style="-webkit-animation-delay:1.5s" class="logo animated bounceInUp">
<img src="img/logo1.png" class="logo1 animated zoomInLeft">
<img src="img/logo2.png" style="-webkit-animation-delay:0.5s" class="logo1 animated zoomInLeft">
<img src="img/logo3.png" style="-webkit-animation-delay:0.8s" class="logo1 animated zoomInLeft">
<img src="img/logo4.png" style="-webkit-animation-delay:1.5s" class="logo1 animated zoomInLeft">
<img src="img/font(4).png" class="font4">
<img src="img/btn.png" style="-webkit-animation-delay:1.5s" class="btn animated zoomInUp">
</section>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script>
var section = $("#main section");
//向下滑
$("#warp").swipeUp(function () {
var index = $("#main .active").index();
index = index + 1 >= section.length ? section.length - 1 : index + 1;
$("#main").animate({
translateY: (-index * 100) + "%"
}, 500, "ease", function () {
section.eq(index).addClass("active").siblings().removeClass("active");
})
})
//向上滑
$("#warp").swipeDown(function () {
var index = $("#main .active").index();
index = index - 1 <= 0 ? 0 : index - 1;
$("#main").animate({
translateY: (-index * 100) + "%"
}, 500, "ease", function () {
section.eq(index).addClass("active").siblings().removeClass("active");
})
})
/*<!--
loading效果
要求：当页面加载完成后才显示，如果没有加载完成，显示加载百分比
页面显示的条件：加载完成显示页面（ 页面中所有的图片加载完了 ）
现在可以实现：一张图片的加载
百分几的条件，单数/总数
-->*/
var imgArray = [];
$("img").each(function () {
imgArray.push($(this).attr("src"))
})
function loadImg(imgSrc, callback) {
var img = new Image();
img.src = imgSrc;
img.onload = function () {
callback();
}
}
function loadImgAll(imgArr, index, callback, endCallback) {
if (index >= imgArr.length) {
endCallback();
} else {
loadImg(imgArr[index], function () {
callback(index + 1, imgArr.length);
loadImgAll(imgArr, ++index, callback, endCallback)
})
}
}
loadImgAll(imgArray, 0, function (index, len) {
console.log("正在加载第" + index + "张/总共" + len + "张")
$("#input").width(Math.floor(index / len * 100 - 20) + "%");
$("#input div").html(Math.floor(index / len * 100) + "%");
}, function () {
console.log("加载完成")
})
</script>
</body>
</html>