js achieve the original end of the finger sliding movement of rotation in FIG effect

html part

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>

<body>
    <div class="content" id="bootPage">
        <div class="wrapOne" id="wrapOne">
            <ul class="boxOne" id="boxOne">
                <li>
                    <div class="box1 box2"><img class="imgPath" src="../../image/one.png"></div>
                </li>
                <li>
                    <div class="box1 box3"><img class="imgPath" src="../../image/two.png"></div>
                </li>
                <li>
                    <div class="box1 box4"><img class="imgPath" src="../../image/three.png"></div>
                </li>
                <li>
                    <div class="box1 box5">
                        <img class="imgPath" src="../../image/four.png">
                        <div class="entry">进入老板助手</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>
<script src="./index.js"></script>

css portion (use less)

*,
::before,
::after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    /*兼容移动端主流浏览器*/
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /*清除移动端点击高亮效果*/
}

/*清除浮动*/
.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}

.content {
    width: 100%;
    // height: 100%;
    margin: 0;
    overflow: hidden;

    .wrapOne {
        position: relative;
        overflow: hidden;
    }

    .wrapTwo {
        position: relative;
        overflow: hidden;
    }

    .wrapThree {
        position: relative;
        overflow: hidden;
    }

    .wrapFour {
        position: relative;
        overflow: hidden;
    }

    .boxOne {
        position: absolute;
        list-style: none;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }

    .boxTwo {
        position: absolute;
        list-style: none;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }

    .boxThree {
        position: absolute;
        list-style: none;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }

    .boxFour {
        position: absolute;
        list-style: none;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }

    li {
        float: left;
    }

    // .box1 {
    //     .px2rem(1950);
    //     height: @px2rem;
    // }

    .box5 {
        position: relative;
    }

    .entry {
        .px2rem(300);
        width: @px2rem;
        border: 1px solid rgba(182, 192, 201, 1);
        font-family: SourceHanSansCN-ExtraLight;
        // font-weight: bold;
        color: rgba(182, 192, 201, 1);
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .entry {
        .px2rem(108);
        height: @px2rem;
        line-height: @px2rem;
    }

    .entry {
        .px2rem(40);
        font-size: @px2rem;
    }

    .entry {
        .px2rem(20);
        border-radius: @px2rem;
    }

    .entry {
        top: 88%;
    }

js part

window.onload=function(){
        var aLi = document.querySelectorAll(".boxOne li");
        var boxOne = document.querySelector('.boxOne');
        var wrap = document.querySelector('.wrapOne');
        // var aLiWidth = boxOne.offsetWidth;
        var viewHeight = document.documentElement.clientHeight;
        var viewWidth = document.documentElement.clientWidth;
        console.log('屏幕高度', viewHeight)
        console.log('屏幕宽度', viewWidth)
        var aLiWidth = viewWidth;
        console.log('aLiWidth: ' + aLiWidth)
        wrap.style.height = viewHeight + 'px';
        // 设置盒子的宽度
        boxOne.style.width = aLi.length * 100 + '%';
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.width = 1 / aLi.length * 100 + '%';
        };
        // 初始化手指坐标点
        var startPoint = 0;
        var startEle = 0;
        var disX = 0;
        //手指按下
        wrap.addEventListener("touchstart", function (e) {
            startPoint = e.changedTouches[0].pageX;
            // console.log(startPoint);
            startEle = boxOne.offsetLeft;
            // console.log(startEle)
        });
        //手指滑动
        wrap.addEventListener("touchmove", function (e) {
            var currPoint = e.changedTouches[0].pageX;
            disX = currPoint - startPoint;
            if (Math.abs(disX) > 30 && Math.abs(disX) < 150) {
                // console.log('滑动距离', Math.abs(disX), disX)
                if (disX > 0) {
                    disX = disX + 150
                } else if (disX < 0) {
                    disX = disX - 150
                }
                var left = startEle + disX;
                // console.log(left)
                boxOne.style.left = left + 'px';

            }
        });
        //当手指抬起的时候，判断图片滚动离左右的距离，当
        wrap.addEventListener("touchend", function (e) {
            var left = boxOne.offsetLeft;
            // 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
            var currNum = Math.round(-left / aLiWidth);
            currNum = currNum >= (aLi.length - 1) ? aLi.length - 1 : currNum;
            currNum = currNum <= 0 ? 0 : currNum;
            boxOne.style.left = -currNum * wrap.offsetWidth + 'px';
        })
}

Reference: https://blog.csdn.net/weixin_42805130/article/details/81870160

js achieve the original end of the finger sliding movement of rotation in FIG effect

Guess you like