jQuery 仿微信/QQ下拉弹动效果

最新推荐文章于 2020-07-08 12:08:24 发布

黄河爱浪

最新推荐文章于 2020-07-08 12:08:24 发布

阅读量676

点赞数

分类专栏： jQuery 文章标签：下拉弹动仿微信仿QQ

本文链接：https://blog.csdn.net/u013350495/article/details/90312525

版权

jQuery 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

jQuery 仿微信/QQ下拉弹动效果，简单易用易修改

在线示例地址：http://www.jq22.com/jquery-info21506

示例图：

核心代码：

/*
    作者:helang
    邮箱:helang.love@qq.com
    jQuery插件库:http://www.jq22.com/mem395541
    CSDN博客:https://blog.csdn.net/u013350495
    微信公众号:web-7258
*/

;$.fn.extend({
    playMoving:function () {
        var $el=$(this),$win=$(window),$container=$(".container");
        var h=$el.outerHeight();
        var oldTop=0,previous=0;

        $win.on("touchmove",function (e) {
            var $e = e || window.event;
            if(previous==0){
                previous=$e.changedTouches[0].pageY;
            }else {
                if($e.changedTouches[0].pageY<previous){
                    return;
                }
            }

            if($container.scrollTop()<1){
                $e.preventDefault();
                if(oldTop==0){
                    oldTop=$e.changedTouches[0].pageY;
                }else {
                    if($e.changedTouches[0].pageY>oldTop){
                        var value=$e.changedTouches[0].pageY-oldTop;
                        $el.css("height",(h+value)+'px');
                    }
                }
            }
        });

        $win.on("touchend",function () {
            $el.css("height",h+'px');
            previous=0;
            oldTop=0;
        });
    }
});

请点击文章上方的【在线示例地址】查看示例。