手机端上下滑动

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @*<script src="https://code.jquery.com/jquery-1.10.2.js"></script>*@

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        header {
            background: #ffcb20;
            border-bottom: 1px solid #ccc;
        }

        header h2 {
            text-align: center;
            line-height: 54px;
            font-size: 16px;
            color: #fff;
        }
        .list{
            overflow:auto;
        }
        .list-ul {
            top:0;
            position:relative;
            margin:auto;
        }

        .list-li {
            line-height: 60px;
            border-bottom: 1px solid #fcfcfc;
            position: relative;
            padding: 0 12px;
            color: #666;
            background: #f2f2f2;
            -webkit-transform: translateX(0px);
        }

        .btn {
            position: absolute;
            top: 0;
            right: -80px;
            text-align: center;
            background: #f7483b;
            color: #fff;
            width: 80px;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            var initX;
            var moveX;
            var X = 0;
            var objX = 0;
            
            window.addEventListener('touchstart', function (event) {

                var obj = event.target.parentNode;
                if (obj.className == "list-li") {
                    initX = event.targetTouches[0].pageX;
                    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
                }
                if (objX == 0) {
                    window.addEventListener('touchmove', function (event) {

                        event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "list-li") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;

                            if (X > 0) {
                                obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                            }
                            else if (X < 0) {
                                var l = Math.abs(X);
                                obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                if (l > 80) {
                                    l = 80;
                                    obj.style.WebkitTransform = "translateX(" + -l + "px)";
                                }
                            }
                        }
                    });
                }
                else if (objX < 0) {

                    window.addEventListener('touchmove', function (event) {
                        //这里必须加阻止默认事件，不然，手机端滑动有问题
                        event.preventDefault();
                        var obj = event.target.parentNode;
                        if (obj.className == "list-li") {
                            moveX = event.targetTouches[0].pageX;
                            X = moveX - initX;
                            if (X > 0) {
                                var r = -80 + Math.abs(X);
                                obj.style.WebkitTransform = "translateX(" + r + "px)";
                                if (r > 0) {
                                    r = 0;
                                    obj.style.WebkitTransform = "translateX(" + r + "px)";
                                }
                            }
                            else {     //向左滑动
                                obj.style.WebkitTransform = "translateX(" + -80 + "px)";
                            }
                        }
                    });
                }

            })
            window.addEventListener('touchend', function (event) {
                var obj = event.target.parentNode;
                if (obj.className == "list-li") {
                    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
                    if (objX > -40) {
                        obj.style.WebkitTransform = "translateX(" + 0 + "px)";
                    } else {
                        obj.style.WebkitTransform = "translateX(" + -80 + "px)";
                    }
                }
            })

            var list = document.getElementById("infolist");
            var inner = document.getElementsByClassName("list-ul");
            var startY,moveY,aboveY = 0;
            list.addEventListener("touchstart", function (event) {
                event.preventDefault();
                startY = event.targetTouches[0].pageY;
            })
            list.addEventListener("touchmove", function (event) {
                event.preventDefault();
                moveY = event.targetTouches[0].pageY - startY;//滑动距离手指滑动-手指触摸点
                var _moveY = parseFloat(aboveY) + parseFloat(moveY);//上次位置+滑动距离
                if ((moveY<=0 && $(".list-ul").height() > parseFloat($(".list").height()) + parseFloat($(inner).css("top").topCss()))//滑动到最下端
                    || (moveY > 0 && parseFloat($(".list-ul").css("top").topCssN()) < 0)) {
                    if (_moveY > 0) _moveY = 0;//滑动到最上端
                    $(inner).css("top",Math.round(_moveY) + "px");
                }
            })
            list.addEventListener("touchend", function (event) {
                event.preventDefault();
                aboveY = $(inner).css("top").topCssN();//上次滑动位置
            })

        });
        $(function () {
            String.prototype.gblen = function () {
                var len = 0;
                var count = this.length;
                for (var i = 0; i < count; i++) {
                    if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) {
                        len += 2;
                    } else {
                        len++;
                    }
                }
                return len;
            }
            String.prototype.gbsub=function(len){
                var count=this.length;
                var _len=0;
                var _str="";
                for(var i=0;i<count;i++){
                    if(this.charCodeAt(i)>127 || this.charCodeAt(i)==94){
                        _len+=2;
                    }else{
                        _len++;
                    }
                    _str+=this.charAt(i);
                    if(_len>len){
                        i=count;
                    }
                }
                return _str+'...';
            }
            String.prototype.topCss = function () {
                return this.replace(/[-px]/g,"");
            }
            String.prototype.topCssN = function () {
                return this.replace(/[px]/g,"");
            }
            $(".btn").each(function () {
                $(this).on("click", function () {
                    
                })
            })
            var $ul = $(".list-ul"); $ul.empty();
            for (var i = 0; i < 20; i++) {
                $ul.append('<li class="list-li"><div class="con"><div class="btn">删除</div></li></div>');
            }
            $.get("http://10.100.22.54:8095/api/NewsManager/GetGrabNews", function (data) {
                $ul.empty();
                $.each(data, function (key, value) {
                    var title = value.Title;
                    //if (title.length > 23) { title = title.substring(0, 20) + "...";}
                    $ul.append('<li class="list-li"><div class="con" data-href=' + value.Content + '>'
                        + (title.gblen() > 40 ? title.gbsub(37) : title)
                        + '<div class="btn" data-id='+value.ID+'>删除</div>'
                        +'</li></div>');
                })
            }, "json").done(function () {
                $(".list").height($(window).height() - $("header").height() - 10);
            })
        })

    </script>
</head>
<body>
    <header>
        <h2>消息列表</h2>
    </header>
    <section class="list" id="infolist">
        <ul class="list-ul">
            <li class="list-li">
                <div class="con">
                    英国退欧了，是好事还是坏事
                </div>
                <div class="btn" id="1234">删除</div>
            </li>
            <li class="list-li">
                <div class="con">
                    哇，朝鲜打算收复欧盟
                </div>
                <div class="btn" id="1235">删除</div>
            </li>
            <li class="list-li">
                <div class="con">
                    重大消息，A股将站稳3000点
                </div>
                <div class="btn" id="1235">删除</div>
            </li>
        </ul>
    </section>
</body>
</html>
posted @ 2016-07-12 19:47 wjl910 阅读(83) 评论(0) 收藏举报
刷新页面返回顶部
wjl910

手机端上下滑动

公告
