css3 html5 手机设备列表的弹回和加速移动

最新推荐文章于 2021-08-04 10:26:45 发布

weixin_30247781

最新推荐文章于 2021-08-04 10:26:45 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/sxmny/p/3959508.html

版权

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .min {
            width: 350px;
            height: 400px;
            overflow: hidden;
        }

            .min ul {
                list-style: none;
                display: block;
            }

                .min ul li {
                    height: 30px;
                }
    </style>
<body>
    <div class="min">
        <ul>
            <li>21212125</li>
            <li>12</li>
            <li>343</li>
            <li>5345</li>
            <li>53</li>
            <li>435</li>
            <li>ert</li>
            <li>345</li>
            <li>eg</li>
            <li>grrrrrr</li>
            <li>3453</li>
            <li>ret</li>
            <li>345</li>
            <li>21212125</li>
            <li>456</li>
            <li>56</li>
            <li>rt</li>
            <li>67</li>
            <li>768</li>
            <li>789</li>
            <li>dfg</li>
            <li>789</li>
            <li>21212gggggg125</li>
            <li>21212125</li>
            <li>789</li>
            <li>eeqqqqqqqq</li>
            <li>789</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end</li>
            <li>gf</li>
            <li>ttgg</li>
            <li>sdf</li>
            <li>789</li>
            <li>21212125</li>
            <li>dgdgdgd</li>
            <li>90</li>
            <li>21212125</li>
            <li>-90</li>
            <li>21212125</li>
            <li>21212125</li>
            <li>2121902125</li>
            <li>90-</li>
            <li>21212125</li>
            <li>end9999999999999</li>
        </ul>
    </div>   
</body>

    <script>
        $.fn.touchEvn = function () {

            return this.each(function () {
                var $this = $(this);
                var $touchtarge = $this.children('ul');
                var _ = this;
                _.startY = 0;
                //最高
                _.maxHeight = $touchtarge[0].scrollHeight - $this.height();
                _.StartSpanTime = undefined;
                _.LastTop = 0;
                $touchtarge.on('touchstart', function (e) {
                    _.startY = event.targetTouches[0].pageY;
                    _.StartSpanTime = event.timeStamp;

                }).on('touchmove', function (e) {
                    $(this).css({ 'transition': 'none' });
                    //移动的长度
                    var len = _.startY - event.targetTouches[0].pageY;
                    //最终的长度
                    len = (_.LastTop + len) * -1;
                    $(this).css('marginTop', len);

                }).on('touchend', function (e) {
                    //最终停留的位置
                    _.LastTop = _.LastTop + (_.startY - event.changedTouches[0].pageY);
                    $(this).css({ 'transition': 'margin 1s', 'transition-timing-function': 'cubic-bezier(0.1,0.3,0.5,1)' });
                    if (_.LastTop < 0) {
                        _.LastTop = 0;
                        $(this).css('marginTop', _.LastTop);
                    } else if (_.LastTop > _.maxHeight) {
                        _.LastTop = _.maxHeight;
                        $(this).css('marginTop', _.LastTop * -1);
                    }
                    else {
                        //减速行驶
                        var endLen = _.checkSpeen(event.timeStamp - _.StartSpanTime, _.startY - event.changedTouches[0].pageY);
                        _.LastTop = _.LastTop + endLen;
                        $(this).css('marginTop', _.LastTop * -1);
                    }
                }).on('transitionend',function(){
　　　　　　　　　　if (_.LastTop < 0) {
                        _.LastTop = 0;
                        $(this).css('marginTop', _.LastTop);
                    } else if (_.LastTop > _.maxHeight) {
 _.LastTop = _.maxHeight;
 $(this).css('marginTop', _.LastTop * -1);
 }

　　　　　　　　　　});

                //计算减速行驶距离
                _.checkSpeen = function (t, s, maxlen) {
                    var v = s / t;
                    //惯性距离
                    var len = 800 * v / 11;                   
                    if (len > maxlen) {
                        return maxlen;
                    }
                    else {
                        return len;
                    }
                }

            });
        }

        $('.min').touchEvn();
    </script>

转载于:https://www.cnblogs.com/sxmny/p/3959508.html

weixin_30247781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 html5 手机设备列表的弹回和加速移动

<style type="text/css"> * { margin: 0; padding: 0; } .min { width: 350px; height: 400px; overflow:...
复制链接

扫一扫