效果

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. Metasploit（msf）利用ms17_010（永恒之蓝）出现Encoding::UndefinedConversionError问题

    Metasploit利用ms17_010(永恒之蓝) 利用流程 先确保目标靶机和kali处于同一网段,可以互相Ping通 目标靶机防火墙关闭,开启了445端口 输入search ms17_010 搜索 ...

  2. Tomcat深入浅出——Servlet(三)

    零.HttpServletRequest 上一篇已经介绍了这个接口,现在补充些内容 首先介绍一下作用域: jakarta.servlet.jsp.PageContext pageContext 页面作 ...

  3. 安卓fastboot刷机、刷magisk、aidlux备忘

    环境就不多说了,网上一堆教程,我只在这边简单记录一下,以小米手机为例 刷机 解锁bootloader PC上配置好adb.fastboot,也就是platform-tools工具包加入系统变量,在命令 ...

  4. XML入门介绍

    目录 XML 简介 xml 语法 文档声明 (1)创建一个 xml 文件 (2)图书有 id 性 属性 一 表示唯一 标识,书名,有作者,价格的信息 xml 注释 元素(标签) 1)什么是 xml 元 ...

  5. 如何学习Vim

    如果你是Linux用户,学习Vim会有很大的好处. 如果你是windows用户,个人建议还是使用vscode. 准备大约40min的学习时间,打开终端,输入下面命令开启自带教程 vimtutor 按操 ...

  6. wcf连接数据库用sqlhelper，连接数一直没有释放反而增加

    找了一天,发现原因是配置的连接字符串没有加上最大连接数,所以每次请求都是一直增加,而MariaDB默认的连接数是151,为了本地多项目测试已改成以前. 下面是配置的连接字符串:  <add na ...

  7. 透过Redis源码探究Hash表的实现

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/667 本文使用的Redis 5.0源码 概述 我们在学习 Redis ...

  8. Gauss 消元法

    目录 1. 线性方程组 2. 球形空间产生器sphere 3. 臭气弹 4. 开关问题 错乱瞎写 1. 线性方程组 省流:初等行变换化为一个上三角,然后瞬间出解 inline bool z(const ...

  9. GitHub 主页美化设置教程

    GitHub profile设置教程 早些时候逛GitHub,就发现别人的主页特别的精美,当时没有空研究,前几天得空给安排了一下 先看一下成品 贴一个github上一个男人的主页 下面这个是我的 果然 ...

  10. 一颗完整意义的LPWAN SOC无线通信芯片——ASR6601

    ASR6601是完整意义的LPWAN SOC无线通信芯片,该芯片集成了LORA射频收发器.调制解调器和32位RISC MCU.MCU采用cortex M4,频率48mhz.LORA射频收发器从150 ...