欢迎使用CSDN-markdown编辑器

来源:互联网 发布:沧澜网络代练可信吗 编辑:程序博客网 时间:2024/06/14 18:24

比较仓促,
先放上去吧,方面以后再来修改

(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里面吧

0 0
原创粉丝点击