效果

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. 论文解读（GCC）《Efficient Graph Convolution for Joint Node RepresentationLearning and Clustering》

    论文信息 论文标题:Efficient Graph Convolution for Joint Node RepresentationLearning and Clustering论文作者:Chaki ...

  2. 【Python】和【Jupyter notebook】的正确安装方式？

    学了那么久Python,你的Python安装方式正确吗?今天给你看看什么才是Python正确的安装方式,教程放在下面了,喜欢的记得点赞. Python安装 Python解答Q群:660193417## ...

  3. Python自动化办公：27行代码实现将多个Excel表格内容批量汇总合并到一个表格

    序言 (https://jq.qq.com/?_wv=1027&k=GmeRhIX0) 老板最近越来越过分了,快下班了发给我几百个表格让我把内容合并到一个表格内去.还好我会Python,分分钟 ...

  4. python实现人脸关键部位检测（附源码）

    人脸特征提取 本文主要使用dlib库中的人脸特征识别功能. dlib库使用68个特征点标注出人脸特征,通过对应序列的特征点,获得对应的脸部特征.下图展示了68个特征点.比如我们要提 取眼睛特征,获取3 ...

  5. Tomcat深入浅出(一)

    一.Tomcat简介 我们下载好Tomcat后需要配置一下Java环境:如果打开出现闪退得情况,首先是jdk 同时配置JRE_HOME Tomcat的一些关键目录: /bin:存放用于启动及关闭的文件 ...

  6. SpringMVC-02

    一.SSM整合[重点] 1 SSM整合配置 问题导入 请描述"SSM整合流程"中各个配置类的作用? 1.1 SSM整合流程 创建工程 SSM整合 Spring SpringConf ...

  7. VBA驱动SAP GUI完成界面元素值初始化

    小爬日常利用VBA完成SAP GUI自动化时,经常被这个问题困扰:我们进入一个事务代码界面时,如FBL1N(供应商行项目显示),很多的 GuiTextField(文本框)对象.GuiCheckBox( ...

  8. 5-4 Seata 分布式事务管理

    下载Seata https://github.com/seata/seata/releases https://github.com/seata/seata/releases/download/v1. ...

  9. VIM学习笔记-1

    VIM vim主要分为3个模式: Normal 模式 Insert模式 command模式 Insert 模式就是普通的编辑模式,没有太多可以介绍的,vim的主要功能都在 Normal 模式和 Com ...

  10. 聊一聊 C# 后台GC 到底是怎么回事？

    一:背景 写这一篇的目的主要是因为.NET领域内几本关于阐述GC方面的书,都是纯理论,所以懂得人自然懂,不懂得人也没法亲自验证,这一篇我就用 windbg + 源码 让大家眼见为实. 二:为什么要引入 ...