使用『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& ...
随机推荐
- WPF开发随笔收录-唯一标识符GUID
一.前言 该系列博客用于记录本人在WPF开发过程中遇到的各种知识点 二.正文 1.在工作的项目中,软件需要用到在线升级功能,由于第一次弄,在下载服务端的文件到本地时,文件的名称我选择直接生成为固定的格 ...
- CODING DevOps 助力中化信息打造新一代研效平台，驱动“线上中化”新未来
中化信息技术有限公司,简称"中化信息",是世界 500 强企业中国中化控股有限责任公司(简称"中国中化")的全资直属公司,依托于中国中化的信息化建设实践,建立起 ...
- web文本划线的极简实现
开篇 文本划线是目前逐渐流行的一个功能,不管你是小说阅读网站,还是卖教程的的网站,一般都会有记笔记或者评论的功能,传统的做法都是在文章底部加一个评论区,优点是简单,统一,缺点是不方便对文章的某一段或一 ...
- JavaScript扩展原型链浅析
前言 上文对原型和原型链做了一些简单的概念介绍和解析,本文将浅析一些原型链的扩展. javaScript原型和原型链 http://lewyon.xyz/prototype.html 扩展原型链 使用 ...
- osx系统使用技巧集锦
6.禁用dashboard defaults write com.apple.dashboard mcx-disabled -boolean YES && killall Dock 5 ...
- APISpace 月出月落和月相API接口 免费好用
月出和月落的位置,正如地球围绕太阳变化时产生的日出和日落一样,但是也和月相有关.一天中月亮升起的时间取决于它的月相.当你记得月相取决于太阳,月亮和地球的相对位置应该是明显的.月相是指从地球上看月球直 ...
- SpringCloudAlibaba分布式事务解决方案Seata实战与源码分析-中
事务模式 概述 在当前的技术发展阶段,不存一个分布式事务处理机制可以完美满足所有场景的需求.一致性.可靠性.易用性.性能等诸多方面的系统设计约束,需要用不同的事务处理机制去满足. 目前使用的流行度情况 ...
- HBase学习（一） 基本概念和安装基本命令
HBase学习(一) 一.了解HBase 官方文档:https://hbase.apache.org/book.html 1.1 HBase概述 HBase 是一个高可靠性.高性能.面向列.可伸缩的分 ...
- TCP/IP协议三次握手、四次断开
1.tcp报文格式 1行代表一个字节: 第一行:代表源端口和目的端口,分别占16位: 第二行:32位序列号:表示客户端向服务端发送的报文的序号是多少,这个序号是计算机随机生成的一个代表该报文的唯一标示 ...
- mysql 跨库事务XA
前一段时间在工作中遇到了跨库事务问题,后来在网上查询了一下,现在做一下整理和总结. 1.首先要确保mysql开启XA事务支持 SHOW VARIABLES LIKE '%XA%' 如果innodb_s ...