使用『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& ...
随机推荐
- 在Visual Studio Code 中配置Python 中文乱码问题
在Visual Studio Code 中配置Python 中文乱码问题 方法一:直接代码修改字符集 添加前四行代码 import io import sys #改变标准输出的默认编码 sys.std ...
- Spring框架系列(12) - Spring AOP实现原理详解之JDK代理实现
上文我们学习了SpringAOP Cglib动态代理的实现,本文主要是SpringAOP JDK动态代理的案例和实现部分.@pdai Spring框架系列(12) - Spring AOP实现原理详解 ...
- Codeforces Round #802 (Div. 2)
题集链接 A Optimal Path 水 代码 #include <bits/stdc++.h> #define endl "\n" using namespace ...
- STM32液晶显示HT1621驱动原理及程序代码
1.HT1621电路分析 HT1621为32×4即128点内存映像LCD驱动器,包含内嵌的32×4位显示RAM内存和时基发生器以及WDT看门狗定时器． HT1621驱动电路如下图所示: 图1 与单片机 ...
- 如何等待ajax完成再执行相应操作
ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用. 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作. / ...
- Markdown扩展语法
目录 Markdown 语法补充 一.快速生成 HTML 表格代码 在线表格编辑器--TablesGenerator 二. 插入视频.音频或GIF 1. 视频 2. 音频 方法一 方法二 方法三 3. ...
- 在 Windows 上使用压缩文件 安装 MySQL
在 Windows 上使用压缩文件 安装 MySQL 1. 下载 MySQL mysql-5.7.27-win32.zip:二进制文件; 服务器类型: mysqld 2. 解压 mysql-5.7.2 ...
- Redis 哈希Hash底层数据结构
1. Redis 底层数据结构 Redis数据库就像是一个哈希表,首先对key进行哈希运算得到哈希值再取模得到一个下标,每个元素是一个节点,节点之间形成链表.这感觉有点像Java中的HashMap. ...
- python闭包函数及装饰器简介
目录: 闭包函数简介 闭包函数的实际应用 装饰器简介 装饰器初期-完整版 装饰器语法糖 闭包函数简介 1.定义在函数内部的函数(函数的嵌套) 2.内部函数运用外部函数局部名称空间中的变量名 注:函数名 ...
- Javascript 函数声明、调用、闭包
1 # Javascript 函数声明.调用.闭包 2 # 一.函数声明 3 # 1.直接声明.浏览器在执行前,会先将变量和函数声明进行提升. 4 fn(); 5 function fn () { 6 ...