效果

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];

    }

})

使用『jQuery』『原生js』制作一个选项卡盒子 —— { }的更多相关文章

  1. 放弃jQuery，使用原生js吧！

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  2. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  3. Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

    1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...

  4. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  5. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  6. 【原生JS】制作网页头部刷新进度条

    之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...

  7. 使用『jQuery』『原生js』制作一个导航栏动效 —— { }

    效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...

  8. jquery 变量和原生js变量的关系

    其实js 变量和 jquery没什么不一样, 也可以直接 var  hhhh=$("header"); 但是当用到用到hhh时依然要用jquery 的方式,而不能js原生的方式.

  9. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

随机推荐

  1. 会话技术 Cookie+Session

    会话:这种在多次HTTP连接间维护用户与同一用户发出的不同请求之间关联的情况称为维护一个会话(session) 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开: 功能:在一次会话 ...

  2. UiPath参数介绍和使用

    一.参数介绍 用于将数据从一个项目传递到另一个项目.在全局意义上,它们类似于变量,因为它们动态地存储数据并传递给它.变量在活动之间传递数据,而参数在自动化之间传递数据.因此,它们使你能够一次又一次地重 ...

  3. python小题目练习（五）

    题目:Python实现快速排序 代码实现: """Author:mllContent:Python实现快速排序Date:2020-11-05""&qu ...

  4. ArrayList分析2 :Itr、ListIterator以及SubList中的坑

    ArrayList分析2 : Itr.ListIterator以及SubList中的坑 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/16409137.html ...

  5. 当在命令行输入"pip install xxx"

    当输入"pip install xxx"时发生了什么 不知道你在下载一些包的时候有没有什么疑惑,输入了"pip install xxx" ,系统是如何找到对应的 ...

  6. 解读Go分布式链路追踪实现原理

    摘要:本文将详细介绍分布式链路的核心概念.架构原理和相关开源标准协议,并分享我们在实现无侵入 Go 采集 Sdk 方面的一些实践. 本文分享自华为云社区<一文详解|Go 分布式链路追踪实现原理& ...

  7. Selenium指定浏览器路径

    ChromeOptions options = new ChromeOptions(); options.setBinary("C:\\Program Files (x86)\\Google ...

  8. 使用Java客户端发送消息和消费的应用

    体验链接:https://developer.aliyun.com/adc/scenario/fb1b72ee956a4068a95228066c3a40d6 实验简介 本教程将Demo演示使用jav ...

  9. 用cmd命令进行磁盘清理（主要是系统盘）

    作用:清理磁盘(主要是系统盘)中不需要的垃圾文件操作方法: 第一步:Windows键+R键 调出cmd命令窗口(窗口图如下:) 第二步:输入框中输入cmd命令,按下Enter键,进入如下图界面: 第三 ...

  10. (一)java基础篇-----认识java

    1.简单介绍java起源: 1995年,詹姆斯-高斯林在sun公司开发出java编程语言.到2010年,sun公司被Oracle公司收购,而詹姆斯-高斯林也离开了Oracle公司.所以,如今想要安转j ...