使用『jQuery』『原生js』制作一个选项卡盒子 —— { }
效果
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』制作一个选项卡盒子 —— { }的更多相关文章
- 放弃jQuery，使用原生js吧！
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js
1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 【原生JS】制作网页头部刷新进度条
之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...
- 使用『jQuery』『原生js』制作一个导航栏动效 —— { }
效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...
- jquery 变量和原生js变量的关系
其实js 变量和 jquery没什么不一样, 也可以直接 var hhhh=$("header"); 但是当用到用到hhh时依然要用jquery 的方式,而不能js原生的方式.
- 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）
其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...
随机推荐
- Obsidian基础教程
Obsidian基础教程 相关链接 2021年新教程 - Obsidian中文教程 - Obsidian Publish 软通达 基础设置篇 1. 开启实时预览 开启实时预览模式,所见即所得 打开设置 ...
- UiPath存在元素Element Exists的介绍和使用
一.Element Exists的介绍 使您能够验证UI元素是否存在,即使它不可见,输出的是一个布尔值 二.Element Exists在UiPath中的使用 1. 打开设计器,在设计库中新建一个Se ...
- C# · 委托语句简化演变
1.委托基础语句形式 namespace QLVision { delegate void dHelp();//定义委托 static class Program { /// <summary& ...
- 本地拉取服务器上的项目，SVN 由于目标计算机积极拒绝 无法连接失败
下面几种解决方案一定一定一定都要试一下哈, 比如,如果你的SVN没有启动,并且防火墙也开启了,那么你即便启动了SVN,也是无法拉取项目的,需要把防火墙也关闭. 1.是否启动了svn 输入命令查看是否启 ...
- NC13328 倒水
NC13328 倒水 题目 题目描述 有一个大水缸,里面水的温度为 \(T\) 单位,体积为 \(C\) 升.另有 \(n\) 杯水(假设每个杯子的容量是无限的),每杯水的温度为 \(t[i]\) 单 ...
- HBuilderX配置外部服务器（tomcat）查看编辑jsp界面
HBuilderX配置外部服务器(tomcat)查看编辑jsp界面 一.第一种方法,通过启动本地tomcat,查看jsp 在tomcat的webapps目录下创建文件夹HBuilderX 打开HBui ...
- Pytorch从0开始实现YOLO V3指南 part2——搭建网络结构层
本节翻译自:https://blog.paperspace.com/how-to-implement-a-yolo-v3-object-detector-from-scratch-in-pytorch ...
- 树莓派实战：微信机器人（itchat实现）
背景 楼主有一台树莓派4B开发板(8G内存版),是目前的顶配机型.这一年来的业余时间,除了写Java.架构方面的文章,也陆续折腾了不少树莓派上的好玩小项目,在此新开一个树莓派实战的文章系列,分享给粉丝 ...
- 第k小 来源:牛客网
题目 链接:https://ac.nowcoder.com/acm/contest/28886/1003 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K, ...
- 为什么Java有GC调优而没听说过有CLR的GC调优？
前言 在很多的场合我都遇到过一些群友提这样的一些问题: 为什么Java有GC调优而CLR没有听说过有GC调优呢? 到底是Java的JVM GC比较强还是C#使用的.NET CLR的GC比较强呢? 其实 ...