仿移動端購物車滑動效果

時間 2019-11-29
標籤移動購物車滑動效果欄目無線简体版
原文原文鏈接
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">    <title>動畫函數</title>    <style>        * {            margin: 0;            padding: 0;        }        html, body, #box {            width: 100%;            height: 100%;            font-size: 100px;        }        #box {            font-size: .2rem;            position: relative;        }        #box .product-list {            overflow: hidden;        }        #box .product-item {            margin: .1rem 0;            position: relative;        }        #box .product-name {            height: .6rem;            line-height: .6rem;            text-align: center;            background: #93EA5B;            /*transition: transform .6s;*/            uesr-select: none;            position: relative;            z-index: 2;        }        .product-del {            width: .8rem;            height: .6rem;            color: #fff;            line-height: .6rem;            text-align: center;            background: orangered;            position: absolute;            right: 0;            top: 0;            z-index: 1;        }        #modalBg {            width: 100%;            height: 100%;            background-color: rgba(0,0,0,.6);            position: absolute;            left: 0;            top: 0;            z-index: 100;            display: none;        }        .modal {            width: 2rem;            height: 1rem;            border-radius: .06rem;            background-color: gainsboro;            position: absolute;            left: 0;            right: 0;            top: 0;            bottom: 0;            margin: auto;        }        .modal p {            font-size: .16rem;            color: #333;            text-align: center;            margin: .15rem 0;        }        #modalBg button {            width: .4rem;            height: .3rem;            border: none;            outline: none;            border-radius: .02rem;        }        #confirm-btn {            margin-left: 20%;            background-color: #f90;        }        #cancel-btn {            margin-left: 18%;            background-color: red;        }    </style></head><body>    <div id="box">        <div class="product-list">            <div class="product-item">                <div class="product-name">LeBrown James 13</div>                <div class="product-del">刪除</div>            </div>            <div class="product-item">                <div class="product-name">LeBrown James 13</div>                <div class="product-del">刪除</div>            </div>            <div class="product-item">                <div class="product-name">LeBrown James 13</div>                <div class="product-del">刪除</div>            </div>            <div class="product-item">                <div class="product-name">LeBrown James 13</div>                <div class="product-del">刪除</div>            </div>            <div class="product-item">                <div class="product-name">LeBrown James 13</div>                <div class="product-del">刪除</div>            </div>        </div>        <div id="modalBg">            <div class="modal">                <p>肯定刪除該商品嗎？</p>                <button id="confirm-btn">肯定</button>                <button id="cancel-btn">取消</button>            </div>        </div>    </div>    <script>        //rem適配        var designW = 320;        var deviceW = document.documentElement.clientWidth;        var scale = deviceW / designW;        document.documentElement.style.fontSize = 100 * scale + 'px';        var productNames = document.querySelectorAll('.product-name');        var productDels = document.querySelectorAll('.product-del');        var confirmBtn = document.querySelector('#confirm-btn');        var cancelBtn = document.querySelector('#cancel-btn');        var modalBg = document.querySelector('#modalBg');        //遍歷商品        productNames.forEach(function (productName, index) {            //給每個商品綁定開始觸摸事件            productName.addEventListener('touchstart', function (event) {                //取消過渡                this.style.transition = 'none';                //排他                productNames.forEach(function (item) {                    if (item !== productName) {                        item.style.transform = 'translateX(0)';                    }                });                //獲取觸點開始位置                productName.eleX = event.targetTouches[0].clientX;            });            //給每個商品綁定觸摸移動事件            productName.addEventListener('touchmove', function (event) {                //設置過渡                this.style.transition = 'transform .6s';                //獲取觸點移動的距離                var left = event.changedTouches[0].clientX - this.eleX;                //設置商品滑動                if (left > -productDels[index].offsetWidth && left < 0) {                    this.style.transform = 'translateX(' + left + 'px)';                    //若是商品滑動大於刪除按鈕的一半，讓刪除按鈕徹底顯示                    if (left < -productDels[index].offsetWidth / 2) {                        this.style.transform = 'translateX(' + -productDels[index].offsetWidth + 'px)';                    }                }                if (left > 0 && left < productDels[index].offsetWidth) {                    this.style.transform = 'translateX(' + (left - productDels[index].offsetWidth) + 'px)';                    //若是商品滑動大於刪除按鈕的一半，讓刪除按鈕徹底隱藏                    if (left > (productDels[index].offsetWidth / 2)) {                        this.style.transform = 'translateX(0)';                    }                }            });            productName.addEventListener('touchend', function (event) {                var left = event.changedTouches[0].clientX - this.eleX;                //往左滑動距離小於刪除按鈕的一半，而且鬆開了                if (left > -productDels[index].offsetWidth / 2 && left < 0) {                    this.style.transform = 'translateX(0)';                }                //往右滑動距離小於刪除按鈕的一半，而且鬆開了                if (left < (productDels[index].offsetWidth / 2) && left > 0 ) {                    this.style.transform = 'translateX(-' + productDels[index].offsetWidth + 'px)';                }            })        });        //遍歷商品，給每一個商品綁定touchstart事件        productDels.forEach(function (productDel) {            productDel.addEventListener('touchend', function () {                modalBg.style.display = 'block';                confirmBtn.addEventListener('touchend', function () {                    modalBg.style.display = 'none';                    productDel.parentElement.remove();                });                cancelBtn.addEventListener('touchend', function () {                    modalBg.style.display = 'none';                });            })        });    </script></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。