答题卡效果封装（一）原理分析/原生js实现
2021-04-23 本文已影响0人
Raral
在前端开发中，我们大量使用开源很多UI框架和js框架，让我们使用的越好，做项目越快，但是同时让我们也对最基本的css属性和js最基本和最底层的api都遗忘，所以我们通过自己封装插件和组件，让我们更容易拾起最基本的知识点；以下我会从3个部分总结这个过程：1.原生js和jquery实现基本tab效果，2.使用面向对象js和jquery常用封装方法，3.通过vue封装和优化AnswerSheet组件
答题卡切换效果实现 AnswerSheet
- css过渡属性
transform: scale(.85,.85) translate(0, -62px) !important; - 控制 cardn card0 card1 card2 ,切换顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>答题卡</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding-top: 34px;
padding-left: 12px;
padding-right: 12px;
background-color: #999;
}
.card_wrap {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.card_cont {
width: 100%;
height: 452px;
box-sizing: border-box;
margin: 0 auto;
position: absolute;
border-radius: 10px;
background-color:rgb(59, 178, 115);
border: 1px solid #f00;
position: absolute;
bottom: 0;
display: block;
transition: all 1s;
}
/* 表示在视图第一个卡片状态 */
.card0 {
transform: scale(1,1) translate(0, 0) !important;
}
/* 表示在视图第二个卡片状态 */
.card1 {
transform: scale(.85,.85) translate(0, -62px) !important;
}
/* 表示在视图第三个卡片状态 */
.card2 {
transform: scale(.72,.72) translate(0, -135px) !important;
}
.card {
padding-top: 60px;
}
.next {
color: #f00;
position: relative;
right: 0;
bottom:0;
}
.cardn {
transform: translate(0, -1000px);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="answer" class="card_wrap">
<!-- 需要操作卡片 -->
<div class="card_cont card0">
<div class="card">
<p>这是第一个问题0</p>
<div class="card_bottom">
<div class="prev">上一题</div>
<div class="next">下一题</div>
</div>
</div>
</div>
<div class="card_cont card1">
<div class="card">
<p>这是第一个问题1</p>
<div class="card_bottom">
<div class="prev">上一题</div>
<div class="next">下一题</div>
</div>
</div>
</div>
<div class="card_cont card2">
<div class="card">
<p>这是第一个问题2</p>
<div class="card_bottom">
<div class="prev">上一题</div>
<div class="next">下一题</div>
</div>
</div>
</div>
<div class="card_cont card3">
<div class="card">
<p>这是第一个问题3</p>
<div class="card_bottom">
<div class="prev">上一题</div>
<div class="next">下一题</div>
</div>
</div>
</div>
<div class="card_cont card4">
<div class="card">
<p>这是第一个问题4</p>
<div class="card_bottom">
<div class="prev">上一题</div>
<div class="next">下一题</div>
</div>
</div>
</div>
</div>
<!-- <div class="next">下一题</div> -->
</div>
</body>
<script>
var cardConts = document.querySelectorAll(".card_cont");
var nextBtns = document.querySelectorAll(".next");
var prevBtns = document.querySelectorAll(".prev");
var currentIndex = 0;
var currentCard = cardConts[0];
console.log(currentIndex, currentCard)
setIndex();
//设置z-index
function setIndex() {
for(var i = 0; i < cardConts.length; i ++) {
cardConts[i].style.zIndex = cardConts.length - i;
}
}
Array.prototype.forEach.call(nextBtns, function(item) {
item.onclick = nextHandler;
})
Array.prototype.forEach.call(prevBtns, function(item) {
item.onclick = prevHandler;
})
//点击下一个
function nextHandler(e) {
let rest = cardConts.length - (currentIndex + 1);
console.log("next剩下的，" + rest)
if(rest <= 0) {
alert("最后一道题")
return
}
cardConts[currentIndex].classList.remove("card0");
cardConts[currentIndex].classList.add("cardn");
rest >=1 && changeCardClass("next",1, cardConts[currentIndex]);
rest >=2 && changeCardClass("next",2, cardConts[currentIndex]);
rest >=3 && changeCardClass("next",3, cardConts[currentIndex]);
currentIndex += 1;
}
//点击上一个
function prevHandler(e) {
let rest2 = currentIndex;
let rest = cardConts.length - (currentIndex + 1);
if(rest2 <= 0) {
alert("上面没题了")
return
}
console.log("prev剩下的，" + rest);
//把当前变为cardn
cardConts[currentIndex].classList.remove("card0");
cardConts[currentIndex].classList.add("card1");
//把上一个变为card0
rest2 >=1 && changeCardClass("prev", -1, cardConts[currentIndex])
//把下一个变为card0
rest >=1 && changeCardClass("prev",1, cardConts[currentIndex]);
//把下下个变为card1
rest >=2 && changeCardClass("prev",2, cardConts[currentIndex]);
//把下下下个变为card2
// rest >=2 && changeCardClass("prev",3, cardConts[currentIndex]);
currentIndex -= 1;
}
//获取当前card的相邻的卡片
function changeCardClass(type, num, currentNode) {
let _temp = null;
switch (num) {
case -1:
_temp = currentNode.previousElementSibling;
break;
case 1:
_temp = currentNode.nextElementSibling;
break;
case 2:
_temp = currentNode.nextElementSibling.nextElementSibling;
break;
case 3:
_temp = currentNode.nextElementSibling.nextElementSibling.nextElementSibling;
break;
default:
break;
}
if(type == "next") {
_temp.classList.remove("card" + num);
_temp.classList.add("card" + (num - 1));
}else {
if(num < 1) {
_temp.classList.remove("cardn");
_temp.classList.add("card0");
}else {
_temp.classList.remove("card" + num);
_temp.classList.add("card" + (num + 1));
}
}
}
</script>
</html>
效果：
1619138225(1).png
