仿移动端购物车滑动效果

时间: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>

原文地址：https://www.cnblogs.com/wangsai-666/p/11956367.html

随机文章
本站知识点必读
最近更新