-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
117 lines (103 loc) · 3.7 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>duangPage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<style>
html{height: 100%;}
body{color:#333;margin: 0;-webkit-user-select:none;-webkit-touch-callout:none;height: 100%;background: #000000;}
.wrapper{display:block;width: 100%;max-width:640px;margin: 0 auto;height: 100%;}
#wrap{position:relative;height:100%;}
img{max-width: 100%;}
#pages{width:100%;height:100%;text-align:center;overflow:hidden;}
.page{width:100%;height:100%;background-size:cover;background-color:#999;}
.page0{background:white;}
.page1{background:red;}
.page2{background:yellow;}
.page3{background:green;}
h1{text-align:center;font-size:30px;}
#loading{background-image: url(img/load.gif); width:100px;height: 100px;background-size:cover;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);z-index:9999;}
</style>
</head>
<body>
<div id="wrap" class="wrapper">
<div id="pages">
<div class="page page0">
<h1>图片</h1>
<img data-src="http://img.sj33.cn/uploads/allimg/201402/7-140224140Kb49.png" alt="">
</div>
<div class="page page1" data-title="更换标题">
<h1>文本</h1>
<div class="box">
<p>呵呵呵哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<img data-src="https://avatars1.githubusercontent.com/u/2008850?v=3&s=460" alt="">
</div>
</div>
<div class="page page2" data-title="苹果婊">
<h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1>
</div>
<div class="page" data-src="img/img2.jpg"></div>
<div class="page" data-src="img/img3.jpg"></div>
<div class="page page3"><h1>page3</h1></div>
</div>
</div>
<div id="loading"></div>
<script type="text/javascript" src="src/zepto.min.js"></script>
<script type="text/javascript" src="src/duangPage.js"></script>
<script>
Zepto(function($) {
var duang = new duangPage('pages', {
duration: 800,
start: 0,
direction: 1,
loop: false,
ease: 'ease',
hash: true,
currentClass: 'cur',
transition: 'slide',
preload:'near' //'current' 'near' 'all'
});
var $loading = $('#loading');
duang.on('allImagesDone', function(i) {
$loading.hide();
$('#arrowB').show();
console.log('allImagesDone');
})
duang.on('currentImagesDone', function(i) {
$loading.hide();
console.log('currentImagesDone');
})
duang.on('nearImagesDone', function(i) {
console.log('nearImagesDone');
})
duang.on('before', function(i) {
console.log('before');
})
duang.on('update', function(i) {
//console.log('update');
})
duang.on('after', function(i) {
var $p = $('.page').eq(i);
if($p.data('src')||$p.children().data('src'))$loading.show();
console.log('after');
})
})
// var duang = new pageSwitch('pages', {
// duration: 800,
// start: 0,
// direction: 1,
// loop: false,
// ease: 'ease',
// hash: true,
// currentClass: 'cur',
// transition: 'slide',
// preload:'near' //'current' 'near' 'all'
// });
</script>
</body>
</html>