比較倉促,
先放上去吧,方面以後再來修改
(function(jQuery,document){
if(!jQuery){
if(console.error){
console.error("請先引入 jQuery.js");
}
return;
}
if(!document || !document.body){
if(console.error){
console.error("需要body加載完成之後在能執行pull.js");
}
return;
}
var b = document.body;
var x,y,scrollTop;
var isTouch,isPullDown=false,isPullUp=false;
b.addEventListener("touchstart", function(evt){
//console.log('touchstart');
var touch = evt.touches[0]; //獲取第一個觸點
x = Number(touch.pageX); //頁面觸點X座標
y = Number(touch.pageY); //頁面觸點Y座標
scrollTop=b.scrollTop;
isTouch=true;
//console.log('x = ' + x);
//console.log('y = ' + y);
});
b.addEventListener("touchend", function(evt){
//console.log('touchend');
isTouch=false;
isPullDown=false;
isPullUp=false;
});
b.addEventListener("touchmove", function(evt){
//console.log('touchmove');
var touch = evt.touches[0]; //獲取第一個觸點
var mx = Number(touch.pageX); //頁面觸點X座標
var my = Number(touch.pageY); //頁面觸點Y座標
//console.log("isTouch = " + isTouch)
//console.log("y-my = " + (y-my))
//console.log("b.scrollTop = " + b.scrollTop);
if(isTouch){
if(my -y >30){
if(b.scrollTop==0){
if(!isPullUp){
console.log("pullUp");
isPullUp=true;
}
}
}
if( y-my > 100 ){
if(scrollTop!=0 && scrollTop == b.scrollTop){
if(!isPullDown){
//console.log('my = ' + my);
//console.log('y = ' + y);
//console.log('scrollTop = ' + scrollTop);
//console.log('b.scrollTop = ' + b.scrollTop);
console.log("pullDown");
isPullDown=true;
}
}
}
}
});
})(jQuery,document)
-=—————————————————-
修改了一下
(function($){
if(!$){
if(console.error){
console.error("請先引入 jQuery.js");
}
return;
}
var Pull= function(b,setting){
if(!b){
if(console.error){
console.error("需要body加載完成之後在能執行pull.js");
}
return;
}
b = b[0];
var settings=$.extend({},Pull.defaults,setting);
var x,y,scrollTop;
var isTouch,isPullDown=false,isPullUp=false;
b.addEventListener("touchstart", function(evt){
//console.log('touchstart');
var touch = evt.touches[0]; //獲取第一個觸點
x = Number(touch.pageX); //頁面觸點X座標
y = Number(touch.pageY); //頁面觸點Y座標
scrollTop=b.scrollTop;
isTouch=true;
//console.log('x = ' + x);
//console.log('y = ' + y);
});
b.addEventListener("touchend", function(evt){
//console.log('touchend');
isTouch=false;
isPullDown=false;
isPullUp=false;
});
b.addEventListener("touchmove", function(evt){
//console.log('touchmove');
var touch = evt.touches[0]; //獲取第一個觸點
var mx = Number(touch.pageX); //頁面觸點X座標
var my = Number(touch.pageY); //頁面觸點Y座標
//console.log("isTouch = " + isTouch)
//console.log("y-my = " + (y-my))
//console.log("b.scrollTop = " + b.scrollTop);
if(isTouch){
if(my -y >30){
if(b.scrollTop==0){
if(!isPullUp){
if(settings.pullUp){
settings.pullUp();
}
//console.log("pullUp");
isPullUp=true;
}
}
}
if( y-my > 100 ){
if(scrollTop!=0 && scrollTop == b.scrollTop){
if(!isPullDown){
//console.log('my = ' + my);
//console.log('y = ' + y);
//console.log('scrollTop = ' + scrollTop);
//console.log('b.scrollTop = ' + b.scrollTop);
if(settings.pullDown){
settings.pullDown();
}
isPullDown=true;
}
}
}
}
});
}
Pull.defaults={
pullDown:function(){
if(console.log){
console.log("pullDown")
}
},
pullUp:function(){
if(console.log){
console.log("pullUp")
}
}
}
$.fn.Pull=function(settings){
return new Pull(this,settings);
};
})(jQuery)
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=640, user-scalable=yes,initial-scale=0.1,maximum-scale=0.1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script src="pull.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var setting = {
pullDown:function(){
console.log("pullDown2");
},
pullUp:function(){
console.log("pullUp2")
}
}
$(document.body).Pull(setting);
});
</script>
<style type="text/css">
body{
text-align:center; margin:0 atuto;
}
.container{
overflow: auto;
}
.container div{
line-height: 60px;
font-size: 24px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
<div><span>test</span><span>test</span> </div> <div><span>test</span><span>test</span> </div>
</div>
</body>
</html>
只在chrome裏測試了, chrome的測試方法,是打開chrome開發工具,點擊開發工具工具欄最左邊的手機模擬器圖標 ,然後滑動
吐糟一下,自從csdn把iteye收購以後,iteye的用戶活躍度是直線下降,何棄療啊
這個功能原來是發不到iteye的,其實我一直是用iteye的,就是應爲iteye很簡潔。
現在都快死了,沒辦法,搬到csdn裏面吧