正文
使用『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];
}
})
