效果

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. 一图读懂k8s informer client-go

    概述 为什么要有k8s informer 我们都知道可以使用k8s的Clientset来获取所有的原生资源对象,那么怎么能持续的获取集群的所有资源对象,或监听集群的资源对象数据的变化呢?这里不需要轮询 ...

  2. 会话技术 Cookie+Session

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

  3. vmware修改虚拟机网卡mac地址

    选中"虚拟机" 右键 "设置",然后选中"网络适配器",然后点击"高级",设置"MAC地址"

  4. Bitbucket 使用 SSH 拉取仓库失败的问题

    问题 在 Bitbucket 使用 Linux 机器上 ssh-keygen 工具生成的公钥作为 API KEY,然后在 Jenkins 里面存储对应的 SSH 私钥,最后执行 Job 的时候,Win ...

  5. 用python做个计算器不是轻轻松松吗~

    计算器 Kivy是一个免费的开源Python库,可以快速轻松地开发高度交互的跨平台应用程序. 这里我将使用Python中的Kivy包来构建一个计算器GUI.(https://jq.qq.com/?_w ...

  6. Java开发学习(七)----DI依赖注入之自动装配与集合注入

    一.自动配置 上一篇博客花了大量的时间把Spring的注入去学习了下,总结起来就两个字麻烦.麻烦在配置文件的编写配置上.那有更简单方式么?有,自动配置 1.1 依赖自动装配 IoC容器根据bean所依 ...

  7. httrack使用cookie克隆站点

    关于cookies使用在这里官方已有说明,意思是将cookies.txt文件放在项目的根目下即可,格式也给了说明.问题是cookie值太多,手动不好整理,所以就需要用到神器editthiscookie ...

  8. docker快速安装openvas

    项目地址 1.更换国内docker源 2.docker run -d -p 443:443 -e PUBLIC_HOSTNAME=此处填你宿主机IP --name openvas mikesplain ...

  9. django项目、vue项目部署云服务器

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目 ...

  10. kubernetes 静态存储与动态存储

    静态存储   Kubernetes 同样将操作系统和 Docker 的 Volume 概念延续了下来,并且对其进一步细化.Kubernetes 将 Volume 分为持久化的 PersistentVo ...