H5实现下拉刷新, 上拉加载的效果
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.trantionTop{-webkit-transition:-webkit-transform .6s;-moz-transform:-moz-transform .6s;-ms-transform:-ms-transform .6s; -o-transform:-o-transform .6s;transition:transform .6s;}
.mod_loading{text-align:center;padding:20px 0;text-align:center;color:#000;line-height:21px;}
.mod_loading_inner {margin:0 auto;text-align: center; position: relative; width: 140px; border-radius: 6px; font-size: 14px; padding: 45px 0 10px 0;color:#000; }
.mod_loading_icon { position: absolute; top: 15px; left: 50%; margin-left: -10px; width: 18px; height: 18px; border: 1px solid #FF5A54; -webkit-border-radius: 20px;border-radius: 20px; -webkit-animation: gif 1s infinite linear; animation: gif 1s infinite linear; clip: rect(0 auto 17px 0) }
@keyframes gif {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes gif {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="mod_container" style="-webkit-transform: translate3d(0,0px,0);-webkit-backface-visibility:hidden;-moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000;">
<div class="mod_loading" id="pullTop" style="position:absolute;top:-50px;z-index:-1;width:100%;margin:0 auto;">下拉可以刷新</div>
<div class="mod_loading" id="pullBottom" style="position: static;">
<div class="mod_loading_inner">
<i class="mod_loading_icon"></i>
正在加载，请稍候…
</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script type="text/javascript">
var PulldownRefresh = function(){
this.init.apply(this,arguments);
}
PulldownRefresh.prototype = {
init: function (options){
this.ele = options.ele;
$(document).on({
'touchstart': $.proxy(this.start, this),
'touchmove': $.proxy(this.move, this),
'touchend': $.proxy(this.end, this),
'touchcancel': $.proxy(this.end, this)
});
},
start: function (e) {
this.distance = 0;
this.startY = e.touches[0].clientY;
this._scrollTop = $(window).scrollTop();
this.ele.removeClass('trantionTop');
},
move: function (e){
var currentY = e.changedTouches[0].clientY;
this.isUp = currentY > this.startY;
if (this._scrollTop <= 0 && this.isUp) {
e.preventDefault();
this.distance = currentY - this.startY;
this.distance = Math.floor(this.distance * .4);
if (this.distance >= 20) {
$('#pullTop').html('松开立即刷新');
} else {
$('#pullTop').html('下拉可以刷新');
}
this.ele.css("-webkit-transform", "translate3d(0," + this.distance + "px,0)");
} else if ((this._scrollTop + $(window).height()) >= $('body').height() && !this.isUp) {
e.preventDefault();
this.distance = this.startY - currentY;
this.distance = Math.floor(this.distance * .4);
if (this.distance >= 20) {
$('#pullBottom').html('松开立即加载');
} else {
$('#pullBottom').html('上拉加载更多');
}
this.ele.css("-webkit-transform", "translate3d(0, -" + this.distance + "px,0)");
}
},
end: function (e){
if (this.distance >= 20) {
if (this.isUp) {
this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0, 30px,0)");
$('#pullTop').html('正在加载，请稍候…');
setTimeout(function(){
location.reload();
}, 500);
}else{
if ($('.mod_download_lk').length > 3) {
middleTip();
this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
$(window).scrollTop($(window).scrollTop() + 100);
return;
}
$('#pullBottom').html('<div class="mod_loading_inner"><i class="mod_loading_icon"></i>正在加载，请稍候…</div>');
this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
$(window).scrollTop($(window).scrollTop() + 100);
}
}else if(this.ele.css("-webkit-transform") != 'translate3d(0px, 0px, 0px)'){
this.ele.addClass('trantionTop').css("-webkit-transform", "translate3d(0,0,0)");
}
}
}
var pulldowntoreload = new PulldownRefresh({
"ele": $('.mod_container')
});
</script>
</body>
</html>
|