阅读背景：

移动端下拉 刷新 练习

来源：互联网  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉刷新</title>
    <style>
        /* 小圆开始 */
    *{
         margin: 0; padding: 0;
    }
    .bag{
        transform: translate(0,-2.5rem);
    }
    .fl{
        float: left;
    }
    .tex{
        line-height: 2rem;
        text-align: center;
        margin-left: 5%;
    }
    .hidden{
        height: 2rem;
    }
    .wrap{
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.3rem;
        margin-left: 30%;
    }
    .circle{
        height: 100%;
        box-sizing: border-box;
        border: .1rem solid #777778;
        border-radius: 50%;
    }
    .circle:before{
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        top: 50%;
        left: 0;
        border: .03rem solid #777778;
        border-top: transparent;
        border-radius:  0 0 50% 50%/ 0 0 100% 100%;
        z-index: 2;
    }
    .topa, .bottom{
        position: absolute;
        left: 0;
        width: 100%;
        height: 60%;
        box-sizing: border-box;
        background: #fff;
    }
    .topa{
        top: 0;
        z-index: 1;
        transform-origin: center bottom;
        -webkit-animation-fill-mode:both;
        /* animation: 1s back-half linear 1s infinite;   infinite 为无限循环 */
        animation: 1s back-half linear .9s ;
        animation-fill-mode:both;
    }
    .bottom{
        z-index: 3;
        top: 50%;
        transform-origin: center top;
        -webkit-animation-fill-mode:both;
        animation: .9s front-half linear ;
        animation-fill-mode:both;
    }
    @keyframes front-half{
        0%{
            transform: rotate( 0 );
        }
        99%{
            transform: rotate( 180deg );
            opacity: 1;
        }
        100%{
            transform: rotate( 180deg );
            opacity: 0;
        }
    }
    @keyframes back-half{
        0%{
        transform: rotate(0);
        }
        99%{
        transform: rotate( 180deg );
        opacity: 1;
        }
        100%{
            transform: rotate( 180deg );
            opacity: 0;
        }
    }
    /* 小圆结束 */
    .content{
        margin-top:.5rem; 
    }
    .content .box1{
        width: 100%;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        background: skyblue;
    }
    </style>
</head>
<body>
    <div class="bag">
        <div class="hidden">
            <!-- css正在加载的小圆 只加载一遍  此处有bug 可替换为gif图-->
            <div class="wrap fl">
                <div class="circle"></div>
                <div class="topa"></div>
                <div class="bottom"></div>
            </div>
            <!-- 小圆结束 -->
            <span class="fl tex">正在加载中..</span>
        </div>
        <div class="content">
            <div class="box1">这是第一个盒子</div>
            <div class="box1">这是第二个盒子</div>
            <div class="box1">这是第三个盒子</div>
            <div class="box1">这是第四个盒子</div>
            <div class="box1">这是第五个盒子</div>
            <div class="box1">这是第六个盒子</div>
            <div class="box1">这是第七个盒子</div>
            <div class="box1">这是第八个盒子</div>
            <div class="box1">这是第一个盒子</div>
            <div class="box1">这是第二个盒子</div>
            <div class="box1">这是第三个盒子</div>
            <div class="box1">这是第四个盒子</div>
            <div class="box1">这是第五个盒子</div>
            <div class="box1">这是第六个盒子</div>
            <div class="box1">这是第七个盒子</div>
            <div class="box1">这是第八个盒子</div>
            <div class="box1">这是第一个盒子</div>
            <div class="box1">这是第二个盒子</div>
            <div class="box1">这是第三个盒子</div>
            <div class="box1">这是第四个盒子</div>
            <div class="box1">这是第五个盒子</div>
            <div class="box1">这是第六个盒子</div>
            <div class="box1">这是第七个盒子</div>
            <div class="box1">这是第八个盒子</div>
        </div>
    </div>
    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var slide = function(obj,offset,callback){
            var start,
                end,
                isLock = false,//是否锁定整个操作
                isCanDo = false,//是否移动滑块
                isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),//验证客户端的设备类型
                hasTouch = 'ontouchstart' in window && !isTouchPad;//手机浏览器中的事件。
                //将对象转换为jquery的对象
                obj = $(obj);
                var objparent = obj.parent();

                //判断滑动事件是否在指定高度内， 否则页面上滑至第二页再次下拉还是能触发下拉时间
                function noo(mouseY) {
                var bodyheight = $(window).height();
                if (mouseY != null) {
                    //end = null;
                    if (mouseY > bodyheight) {
                        return false;
                    }
                    else {
                        return true;
                        if (mouseY > bodyheight/2) {
                            obj.touchend();
                        }
                    }

                }
                else {

                    return true;
                }
            }
                var fn = 
                {
                    //移动容器 translate 为画布的变换矩阵添加水平的和垂直的偏移
                    translate:function(distance){
                        obj.css({
                            "-webkit-transform": "translate(0," + distance + "px)",
                            "transform": "translate(0," + distance + "px)"
                        })
                    },
                    //设置效果时间
                    setTranslition: function (time) {
                        obj.css({
                            "-webkit-transition": "all " + time + "s",
                            "transition": "all " + time + "s"
                        });
                    },
                    //返回到初始位置
                    back: function () {
                        fn.translate(0 - offset);
                        console.log(offset);
                        //标识操作完成
                        isLock = false;
                    }

                }
            //滑动开始
            obj.bind("touchstart", function (e) {
                if (objparent.scrollTop() <= 0 && !isLock) {
                    var even = typeof event == "undefined" ? e : event;
                    //标识操作进行中
                    isLock = true;
                    isCanDo = true;
                    //保存当前鼠标Y坐标
                    start = hasTouch ? even.touches[0].pageY : even.pageY;
                    //消除滑块动画时间 调用fn
                    fn.setTranslition(0);
                }
                 //滑动中
            obj.bind("touchmove", function (e) {
                if (objparent.scrollTop() <= 0 && isCanDo) {
                    //console.log(objparent.scrollTop());
                    var even = typeof event == "undefined" ? e : event;
                    //保存当前鼠标Y坐标 touches[0].pageY在手机上点的Y轴位置 event.touches，多点触碰时的位置数组，比如缩放手势必须要用两指的触摸点，就是一个数组
                    end = hasTouch ? even.touches[0].pageY : even.pageY;
                    var checkMove = noo(end);
                    if(checkMove){
                         if (start < end) {
                            //event.preventDefault()该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
                            even.preventDefault();
                            //消除滑块动画时间
                            fn.setTranslition(0);
                            //移动滑块
                            fn.translate(end - start - offset);
                        }
                    }
                 }
             });
              //滑动结束
            obj.bind("touchend", function (e) {
                if (isCanDo) {
                    isCanDo = false;
                    //判断滑动距离是否大于等于指定值
                    if (end - start >= offset) {
                        //设置滑块回弹时间
                        fn.setTranslition(1);
                        //保留提示部分
                        fn.translate(0);
                        //执行回调函数
                        if (typeof callback == "function") {
                            callback.call(fn, e);
                        }
                    } else {
                        //返回初始状态
                        fn.back();
                        /* 这里可添加 ajax 、刷新事件 等 */
                    }
                }
            });
        });
                
    }
    $(function () {
            //slide 滑块
            slide(".bag", 45, function (e) {
                var that = this;
                setTimeout(function () {
                    that.back.call();
                }, 1000)
            });
        });
    
    </script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <me


你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到：
你可能喜欢:
相关阅读:
随便看看: