zoukankan      html  css  js  c++  java
  • css3 html5 手机设备 列表的弹回和加速移动

    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            .min {
                 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>
    

      

  • 相关阅读:
    vue路由对象($route)参数简介
    原生js写ajax请求(复习)
    js,jq.事件代理(事件委托)复习。
    CSS 设置table下tbody滚动条
    H5 调用手机摄像机、相册功能
    css实现六边形图片(最简单易懂方法实现高逼格图片展示)
    input表单的type属性详解,不同type不同属性之间区别
    js对象,set和get方法 的三种实现形式
    day03 变量
    day01 js三种导入html的方法、js书写规范、变量的基本使用、变量提升
  • 原文地址:https://www.cnblogs.com/sxmny/p/3959508.html
Copyright © 2011-2022 走看看