效果

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. 多校联训 DS 专题

    CF1039D You Are Given a Tree 容易发现,当 \(k\) 不断增大时,答案不断减小,且 \(k\) 的答案不超过 \(\lfloor\frac {n}{k}\rfloor\) ...

  2. mt19937 用法

    老是忘记怎么用,自己写一个用作备忘录吧. 首先需要的头文件: #include <random> 或者是 #include <bits/stdc++.h> //万能头 yyds ...

  3. pyflink的安装和测试

    pyflink安装 安装前提:python3.6-3.8 参考:Installation | Apache Flink Python version (3.6, 3.7 or 3.8) is requ ...

  4. 30m精度土壤类型、土壤质地、土壤有机质、土壤PH、土壤氮磷钾

    ​数据下载链接:数据下载链接 引言 全国土壤类型.质地.养分及变化等信息产品分为土壤类型数据.土壤质地数据.土壤养分数据及土壤变化数据等.该类产品是基于野外调查和实地采样,结合历史数据,建立全国土壤类 ...

  5. Tapdata 等40余家行业知名企业，应邀参与共建 NextArch Foundation

      日前,Linux 基金会执行董事 Jim Zemlin 于 Linux 基金会会员峰会(The Linux Foundation Member Summit)上宣布,Linux 基金会正式成立 N ...

  6. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  7. Markdown扩展语法

    目录 Markdown 语法补充 一.快速生成 HTML 表格代码 在线表格编辑器--TablesGenerator 二. 插入视频.音频或GIF 1. 视频 2. 音频 方法一 方法二 方法三 3. ...

  8. nexus 配置文件到本地maven本地仓库 失败

    Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.7:deploy (default-deploy) on p ...

  9. APISpace 让你快速获取安徒生童话故事

    <安徒生童话>是丹麦作家安徒生创作的童话集,共由166篇故事组成.该作爱憎分明,热情歌颂劳动人民.赞美他们的善良和纯洁的优秀品德:无情地揭露和批判王公贵族们的愚蠢.无能.贪婪和残暴. 接口 ...

  10. NOI / 2.1基本算法之枚举 1749:数字方格

    描述: 如上图,有3个方格,每个方格里面都有一个整数a1,a2,a3.已知0 <= a1, a2, a3 <= n,而且a1 + a2是2的倍数,a2 + a3是3的倍数, a1 + a2 ...