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

男娘i 2022-01-30 05:43 214阅读 0赞

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

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

示例图：

![2019-05-14-23-46-05.png][]

核心代码：

/*
        作者: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;
            });
        }
    });

请点击文章上方的【[在线示例地址][http_www.jq22.com_jquery-info21506]】查看示例。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[http_www.jq22.com_jquery-info21506]: http://www.jq22.com/jquery-info21506
[2019-05-14-23-46-05.png]: /images/20220130/48be78e481304dd49eb5849f9141819e.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220130/d3118c0d9b2a485386f1d68485622fd6.png