一直想寫個(gè)仿QQ通訊列表左滑刪除的效果,今天終于忙里偷閑,簡單一個(gè).

大概思路是這樣的:

通過

ontouchstart
ontouchmove
ontouchend

結(jié)合css3的平移.

不多說,直接上demo,如有錯(cuò)誤希望看客老爺雅正.

html:

        <div class="contain">
            <ul>
                <li>
                    <div id="list" class="list">
                        <div class="list_lf"><p>列表1</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表2</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表3</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表4</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表5</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表6</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表7</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
                <li>
                    <div class="list">
                        <div class="list_lf"><p>列表8</p></div>
                        <div class="list_rt"><p>刪除</p></div>
                    </div>
                </li>
            </ul>
        </div>

css:

            .contain{
                width: 200px;
                height: 500px;
                margin: 100px auto;
                border: 1px solid #dcdcdc;
                background-color: #f5f5f5;
            }
            .contain ul {
                margin: 0;
                padding: 0;
                float: left;
                list-style: none;
            }
            .contain ul li{
                position: relative;
                width: 200px;
                height: 50px;
                border-bottom: 1px solid #000;
                overflow: hidden;
            }
            .contain ul li .list{
                position: absolute;
                top: 0;
                left: 0;
                width: 251px;
                height: 100%;
                overflow: hidden;
            }
            .contain ul li .list div{
                float: left;
            }
            .contain ul li .list .list_lf{
                width: 200px;
                overflow: hidden;
            }
            .contain ul li .list .list_lf p{
                width: 180px;
                padding-left: 20px;
            }
            .contain ul li .list .list_rt{
                width: 50px;
                border-left: 1px solid #dcdcdc;
                text-align: center;
            }

　　js:

        var li = document.getElementById('list'),
               spirit, startX, startY, x;
            // touch start listener
         
        function touchStart(event) {
                 event.preventDefault();
                 if (! event.touches.length) return;
                 var touch = event.touches[0];
                 startX = touch.pageX;
                 startY = touch.pageY;
        }
         
        // add touch start listener
        li.addEventListener("touchstart", touchStart, false);

        function touchMove(event) {
                 event.preventDefault();
                 if (!event.touches.length) return;
                 var touch = event.touches[0];
                 x = touch.pageX - startX;
                 // y = touch.pageY - startY;
                 console.log(x);   
                 li.style.webkitTransform = 'translate(' + x + 'px)';
        }
         
        li.addEventListener("touchmove", touchMove, false);

        function touchEnd(event){
            if (x<0&&x>-30) {
                li.style.webkitTransform = 'translate(-51px)';
            }
            if (x<-30) {
                li.style.webkitTransform = 'translate(-51px)';
            };
            if (x>0) {
                li.style.webkitTransform = 'translate(0px)';
            };
        }

        li.addEventListener("touchend", touchEnd, false);

　　等有時(shí)間再繼續(xù)完善..原創(chuàng),勿轉(zhuǎn).謝謝