源码:
;(
function($,window,undefined){
function ScrollUpLoad() {
return new ScrollUpLoad.prototype.init();
}
ScrollUpLoad.prototype = {
init:
function() {
this.distance =
0;
this.touchPosition = {};
this.touchStart();
this.touchMove();
this.touchEnd();
return this;
},
touchStart:
function(){
var _this =
this;
$(window).on(
'touchstart',
function(e){
_this.touchPosition.startY = e.changedTouches[
0].pageY;
})
},
touchMove:
function() {
var _this =
this;
$(window).on(
'touchmove',
function(e){
var scrollTop = $(window).scrollTop(),
serviceHei = $(window).height(),
documenHei = $(document).height();
if(scrollTop + serviceHei >= documenHei){
_this.direction(e,
function(){
_this.distanceRed(
'bottom');
},
function(){
_this.distanceAdd(
'bottom');
})
}
else if(scrollTop ==
0){
_this.direction(e,
function(){
_this.distanceAdd(
'top');
},
function(){
_this.distanceRed(
'top');
})
}
else{
_this.setHtmlCss(
'auto');
}
});
},
touchEnd:
function(){
var that =
this;
$(window).on(
'touchend',
function(){
var scrollTop = $(window).scrollTop();
if($(
'.load').hasClass(
'top')){
if(scrollTop !=
0){
console.log(
'上拉加载!')
$(
'.load').attr(
"style",
"bottom:40px");
}
else{
console.log(
'下拉刷新!')
$(
'.load').attr(
"style",
"top:60px");
}
}
else{
console.log(
'不加载了')
if(scrollTop !=
0){
$(
'.load').removeClass(
'top').addClass(
'bottom down').attr(
"style",
"bottom:-0.46rem");
}
else{
$(
'.load').removeClass(
'top').addClass(
'bottom down').attr(
"style",
"top:-30px;");
}
}
that.setHtmlCss(
'auto');
that.distance =
0;
});
},
direction:
function(e,upFun,downFun) {
var _this =
this,
touchInfor = _this.touchPosition;
touchInfor.endY = e.changedTouches[
0].pageY;
touchInfor.distanceY = touchInfor.endY - touchInfor.startY;
_this.setHtmlCss(
'hidden');
if(touchInfor.distanceY<
0){
if(upFun &&
typeof upFun ===
'function'){
upFun()
}
}
else if(touchInfor.distanceY>
0){
if(downFun &&
typeof downFun ===
'function'){
downFun()
}
}
_this.touchPosition.startY = e.changedTouches[
0].pageY;
},
distanceAdd:
function(direction) {
var _this =
this;
if(_this.distance ==
0){
_this.distance = -
30;
}
$(
'.load').removeClass(
'down top').addClass(
'bottom').css(direction,_this.distance --);
},
distanceRed:
function(direction) {
var _this =
this;
$(
'.load').addClass(
'top').removeClass(
'bottom down').css(direction,_this.distance++)
},
setHtmlCss:
function(flag) {
$(
'html').css(
'overflow-y',flag)
}
}
ScrollUpLoad.prototype.init.prototype = ScrollUpLoad.prototype;
if(!window.ScrollUpLoad){
window.ScrollUpLoad = ScrollUpLoad;
}
})($,window,
undefined);
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<p class="load"></p>
</body>
</html>
css:
.load{position: fixed;left: 50%;bottom: -0.46rem;margin-left: -0.22rem;width: 0.44rem;height: 0.44rem;background:#fff url(../i/shua.png) no-repeat center;background-size:100% 100%;border-radius: 0.44rem;box-shadow: 0 0 0.08rem #ededed;opacity: 0.26;}
.load.top{animation: roat .36s linear infinite;opacity: 1;-webkit-transition:opacity 1s ease 0s;}
.load.bottom{animation: roatNi .4s linear infinite;opacity: 0.26;-webkit-transition:opacity 0.8s ease 0s;}
.load.down{-webkit-transition:all 0.8s ease 0s;}
@-webkit-keyframes roat{0%
{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%
{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
@-webkit-keyframes roatNi{100%
{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}0%
{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
调用:
ScrollUpLoad()