使用『jQuery』『原生js』制作一个选项卡盒子 —— { }

最新推荐文章于 2023-02-23 17:30:06 发布

微风拂晚霞

最新推荐文章于 2023-02-23 17:30:06 发布

阅读量195

点赞数

分类专栏： Web前端文章标签： 1024程序员节 javascript jquery css3 html5

本文链接：https://blog.csdn.net/weixin_43921423/article/details/109258152

版权

Web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

HTML 部分

<body>
    <div id="main-box">
      <div id="left-nav"></div>
      <div id="right-nav"></div>
      <div id="scroll-box">
        <div class="current-box">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolores
            hic, velit sequi dignissimos quisquam nihil! Laboriosam provident
            aliquid ad magnam doloremque aspernatur, assumenda reiciendis sed.
            Deserunt dicta incidunt est?
          </p>
        </div>
        <div class="side-box">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolores
            hic, velit sequi dignissimos quisquam nihil! Laboriosam provident
            aliquid ad magnam doloremque aspernatur, assumenda reiciendis sed.
            Deserunt dicta incidunt est?
          </p>
        </div>
        <div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolores
            hic, velit sequi dignissimos quisquam nihil! Laboriosam provident
            aliquid ad magnam doloremque aspernatur, assumenda reiciendis sed.
            Deserunt dicta incidunt est?
          </p>
        </div>
        <div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolores
            hic, velit sequi dignissimos quisquam nihil! Laboriosam provident
            aliquid ad magnam doloremque aspernatur, assumenda reiciendis sed.
            Deserunt dicta incidunt est?
          </p>
        </div>
        <div>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id dolores
            hic, velit sequi dignissimos quisquam nihil! Laboriosam provident
            aliquid ad magnam doloremque aspernatur, assumenda reiciendis sed.
            Deserunt dicta incidunt est?
          </p>
        </div>
      </div>
    </div>
</body>

CSS 部分

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333744;
    min-height: 90vh;
}

#main-box {
    position: relative;
    width: 900px;
    height: 600px;
    overflow: hidden;
}

#main-box #left-nav,
#main-box #right-nav {
    position: absolute;
    width: 165px;
    height: 100%;
    opacity: 0;
    z-index: 5;
}

#main-box #left-nav {
    left: 0;
}

#main-box #right-nav {
    right: 0;
}

#scroll-box {
    position: absolute;
    left: 200px;
    top: 50%;
    transform: translate(0, -50%);
    width: 2750px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    perspective: 1000px;
}

#scroll-box div {
    flex: 0 0 500px;
    height: 300px;
    margin-right: 50px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 50px;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
#scroll-box div p {
    width: 90%;
    height: 200px;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: #fff;
}

#scroll-box .current-box {
    transform: scale(1.15, 1.15);
}

#scroll-box .side-box {
    filter: blur(3px);
}

JavaScript 部分

$(document).ready(function () {
    var scrollBox = document.getElementById('scroll-box')
    var pageNum = 0 // 
    var scrollBoxWidth = 550 // 点击时 scrollBox 每次移动的距离为550px

    $('#main-box #left-nav').click(function () {
        pageNum--;

        let scrollBoxLeft = CardMove('left')

        $('#scroll-box').animate({
            left: scrollBoxLeft + scrollBoxWidth
        }, "fast", function () {
            $('#main-box #right-nav').css({
                'display': 'block'
            })
            $('#main-box #left-nav').css({
                'display': 'block'
            })
        })
    })
    // 右
    $('#main-box #right-nav').click(function () {
        pageNum++;

        let scrollBoxLeft = CardMove('right')

        $('#scroll-box').animate({
            left: scrollBoxLeft - scrollBoxWidth
        }, "fast", function () {
            $('#main-box #right-nav').css({
                'display': 'block'
            })
            $('#main-box #left-nav').css({
                'display': 'block'
            })
        })
    })

    function CardMove(dir) {
        var pageOffset = 1
        $('#main-box #left-nav').css({
            'display': 'none'
        })
        $('#main-box #right-nav').css({
            'display': 'none'
        })
        let scrollBoxLeft = parseInt(getStyle(scrollBox, 'left'));
        var scrollBoxChildren = document.querySelectorAll('#scroll-box div');
        [].forEach.call(scrollBoxChildren, item => {
            item.classList.remove('current-box')
            item.classList.remove('side-box')
        })
        if (dir === 'left') {
            pageOffset *= -1
            if (pageNum < 0) {
                pageNum = 0
                scrollBoxChildren[pageNum].classList.add('current-box');
                scrollBoxChildren[pageNum + 1].classList.add('side-box');
                $('#main-box #left-nav').css({
                    'display': 'block'
                })
                $('#main-box #right-nav').css({
                    'display': 'block'
                })
                return;
            } else if (pageNum > 0) {
                scrollBoxChildren[pageNum - 1].classList.add('side-box');
            }
        } else {
            if (pageNum > scrollBoxChildren.length - 1) {
                pageNum = scrollBoxChildren.length - 1
                scrollBoxChildren[pageNum].classList.add('current-box');
                scrollBoxChildren[pageNum - 1].classList.add('side-box');
                $('#main-box #right-nav').css({
                    'display': 'block'
                })
                $('#main-box #left-nav').css({
                    'display': 'block'
                })
                return;
            } else if (pageNum < scrollBoxChildren.length - 1) {
                scrollBoxChildren[pageNum + 1].classList.add('side-box');
            }
        }
        scrollBoxChildren[pageNum - pageOffset].classList.add('side-box');
        scrollBoxChildren[pageNum].classList.add('current-box');
        return scrollBoxLeft;
    }

    // 封装获取【样式】的函数
    function getStyle(obj, name) {
        // IE                                              // 主流
        return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, false)[name];
    }
})

微风拂晚霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用『jQuery』『原生js』制作一个选项卡盒子 —— { }

HTML部分<body> <div id="main-box"> <div id="left-nav"></div> <div id="right-nav"></div> <div id="scroll-box"> <div class="current-box"> <p> Lorem i..
复制链接

扫一扫