首先感谢这个大神的css和js，让我得以实现这个效果，我只是将基本的js实现了，大部分的工作都是这个朋友完成的，他将效果实现的很完美，我只是拿过来将功能完善了一下，原文的可选项很多，但是为了快速实现js的结果运算，我将很多的代码都删除了，最后将结果呈现出来，最后再次感谢这位朋友！
代码语言：javascript复制/**
* CSS3 答题卡翻页效果 jQuery Transit
* @authors Candice <286556658@qq.com>
* @date 2016-9-27 15:30:18
* @version v1.0.8
*/效果预览：
不 BB，我们看代码:
answer.js
JS：
代码语言：javascript复制$.fn.answerSheet = function(options) {
var defaults = {
mold: 'card',
};
var opts = $.extend({},
defaults, options);
return $(this).each(function() {
var obj = $(this).find('.card_cont');
var _length = obj.length,
_b = _length - 1,
_len = _length - 1,
_cont = '.card_cont';
for (var a = 1; a <= _length; a ) {
obj.eq(_b).css({
'z-index': a
});
_b -= 1;
}
$(this).show();
if (opts.mold == 'card') {
obj.find('ul li label').click(function() {
var _idx = $(this).parents(_cont).index(),
_cards = obj,
_cardcont = $(this).parents(_cont);
if (_idx == _len) {
return;
} else {
setTimeout(function() {
_cardcont.addClass('cardn');
setTimeout(function() {
_cards.eq(_idx 3).addClass('card3');
_cards.eq(_idx 2).removeClass('card3').addClass('card2');
_cards.eq(_idx 1).removeClass('card2').addClass('card1');
_cardcont.removeClass('card1');
},
200);
},
100);
}
});
$('.card_bottom').find('.prev').click(function() {
var _idx = $(this).parents(_cont).index(),
_cardcont = $(this).parents(_cont);
obj.eq(_idx 2).removeClass('card3').removeClass('cardn');
obj.eq(_idx 1).removeClass('card2').removeClass('cardn').addClass('card3');
obj.eq(_idx).removeClass('card1').removeClass('cardn').addClass('card2');
setTimeout(function() {
obj.eq(_idx - 1).addClass('card1').removeClass('cardn');
},
200);
})
}
});
};H5：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>问卷调查效果实现</title>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="">
<meta name="keywords" content="">
<link href="risk_test.css" rel="stylesheet" />
</head>
<body style="background-color:">
<div class="wrapper">
<div id="answer" class="card_wrap">
<!--Q1-->
<div class="card_cont card1">
<div class="card">
<p class="question"><span>Q1、</span>您觉得最好用的后端框架是什么？</p>
<ul class="select">
<li>
<input id="q1_1" type="radio" name="r-group-1" value="A" οnclick="checkradio(this.value)">
<label for="q1_1">A:SpringBoot</label>
</li>
<li>
<input id="q1_2" type="radio" name="r-group-1" value="B" οnclick="checkradio(this.value)">
<label for="q1_2">B:SpringMVC</label>
</li>
</ul>
<div class="card_bottom"><span><b>1</b>/4</span></div>
</div>
</div>
<!--Q2-->
<div class="card_cont card2" >
<div class="card">
<p class="question"><span>Q2、</span>您觉得前端最好用的框架是什么？</p>
<ul class="select">
<li>
<input id="q2_1" type="radio" name="r-group-2" value="A" οnclick="checkradio(this.value)">
<label for="q2_1">A:VUE</label>
</li>
<li>
<input id="q2_2" type="radio" name="r-group-2" value="B" οnclick="checkradio(this.value)">
<label for="q2_2">B:REACT</label>
</li>
</ul>
<div class="card_bottom"><a class="prev"></a><span><b>2</b>/4</span></div>
</div>
</div>
<!--Q3-->
<div class="card_cont card3">
<div class="card">
<p class="question"><span>Q3、</span>您比较喜欢前端还是后端？</p>
<ul class="select">
<li>
<input id="q3_1" type="radio" name="r-group-3" value="A" οnclick="checkradio(this.value)">
<label for="q3_1">A:前端</label>
</li>
<li>
<input id="q3_2" type="radio" name="r-group-3" value="B" οnclick="checkradio(this.value)">
<label for="q3_2">B:后端</label>
</li>
</ul>
<div class="card_bottom"><span><b>3</b>/4</span></div>
</div>
</div>
<!--Q4-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q4、</span>这是您的结果</p>
<ul class="select">
<li>
<label for="" style="font-size: large;" id="relult"></label>
</li>
</ul>
<div class="card_bottom"><a οnclick="relult()" id="a1">结束评测</a><span><b>4</b>/4</span></div>
</div>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="answer.js"></script>
<script>
$(function(){
$("#answer").answerSheet({});
})
/* 这里是将评测的用户的数据总结到一个数组里面 */
var ary = new Array();
function checkradio(val){
ary.push(val);
}
/* 这里是将结果分析出来给结果 */
function relult(){
if(ary[0] == "A" && ary[1] == "A" && ary[2] == "A"){
$("#relult").append("您的结果是：您比较喜欢前端比较喜欢用VUE，比较喜欢用SpringBoot")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "A" && ary[1] == "A" && ary[2] == "B"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "A" && ary[1] == "B" && ary[2] == "A"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "B" && ary[1] == "B" && ary[2] == "A"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "B" && ary[1] == "A" && ary[2] == "B"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "B" && ary[1] == "B" && ary[2] == "B"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "A" && ary[1] == "B" && ary[2] == "B"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else if(ary[0] == "B" && ary[1] == "B" && ary[2] == "A"){
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}else{
$("#relult").append("这是结果")
document.getElementById("a1").style.display = "none";
}
}
</script>
</body>
</html>body{line-height:1;color:#333;width:100%;margin:0 auto;-webkit-text-size-adjust:none;overflow-x:hidden}p,ol,ul,li{list-style:none}a,span{line-height:1;color:#333;text-decoration:none}button{outline:0}label{font-weight:normal}img{width:100%;display:block}a img{word-break:break-all;word-wrap:break-word}a:hover,a:focus{text-decoration:none}:focus{outline:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:none}
html,body{padding:0; margin:0 auto; height:100%; font-size:15px; max-width:400px}
*{-webkit-appearance:none; margin:0; padding:0}
a, span{color:inherit ; line-height:inherit; text-decoration:none}
img{width:auto }
input{outline:none;}
/**
* CSS3 答题卡翻页效果 jQuery Transit
* @authors Candice <286556658@qq.com>
* @date 2016-9-27 15:30:18
* @version v1.0.8
*/
.wrapper{width:100%; margin:0 auto;}
.card_wrap{width:400px; height:584px; position:relative; overflow:hidden; display:none}
.card_cont{width:100%; height:530px; box-sizing:border-box; margin:0 auto; position:absolute; background:url(test_card_bg.png) no-repeat center top; background-size:100% auto; padding:8px 20px 18px; transition:all ease .5s; -webkit-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; transform:scale(0,0); -moz-transform:scale(0,0);-ms-transform:scale(0,0); -o-transform:scale(0,0); -webkit-transform:scale(0,0); bottom:0; display:none;}
.card{width:320px; height:100%; position:relative; margin:0 auto; padding:0 18px; }
.card .card_bottom{width:100%; position:absolute; bottom:28px; left:0; box-sizing:border-box; padding:0 28px}
.card .card_bottom a{color:#c733c5; cursor:pointer }
.card .card_bottom span{float:right; color:#909090}.card .card_bottom span b{color:#666; font-weight:inherit}
.card_cont.card1{ display:block;transform:scale(1,1) translate(0,0) !important ;
-ms-transform:scale(1,1) translate(0,0) !important ;
-moz-transform:scale(1,1) translate(0,0) !important ;
-webkit-transform:scale(1,1) translate(0,0) !important ;
}
.card_cont.card2{ display:block;
transform:scale(.85,.85) translate(0,-62px) !important ;
-ms-transform:scale(.85,.85) translate(0,-62px) !important ;
-moz-transform:scale(.85,.85) translate(0,-62px) !important ;
-webkit-transform:scale(.85,.85) translate(0,-62px) !important;
}
.card_cont.card3{ display:block;
transform:scale(.72,.72) translate(0,-135px) !important ;
-ms-transform:scale(.72,.72) translate(0,-135px) !important ;
-moz-transform:scale(.72,.72) translate(0,-135px) !important ;
-webkit-transform:scale(.72,.72) translate(0,-135px) !important ;
}
.card_cont.cardn{display:block;
transform:translate(0,-1000px) !important;
-moz-transform:translate(0,-1000px) !important;
-ms-transform:translate(0,-1000px) !important;
-webkit-transform:translate(0,-1000px) !important;}
.question{display:table-cell; height:80px; font-size:16px; font-weight:100; color:#fff; line-height:1.4; vertical-align:middle; padding-left:1em}
.question span{margin-left:-1em}
/*Radio Specific styles*/
input[type='radio']{ display: none;cursor: pointer;}
input[type='radio']:focus, input[type='radio']:active{outline: none;}
input[type='radio'] label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 28px;
color: #666;
}
input[type='radio']:checked label {color: #c733c5 !important;}
input[type='radio'] label:before, input[type='radio'] label:after{
content: '';
font-family: helvetica;
display: inline-block;
width: 20px;
height:20px;
left: 0;
top: 0;
text-align: center;
position: absolute;
}
input[type='radio'] label:before {background-color:transparent;}
input[type='radio'] label:after {color: #c733c5;}
input[type='radio']:checked label:before {
-moz-box-shadow: inset 0 0 0 5px #fff;
-webkit-box-shadow: inset 0 0 5px #fff;
box-shadow: inset 0 0 0 5px #fff;
border:1px solid #c733c5;
background-color:#c733c5;
}
input[type='radio'] label:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border:1px solid #c733c5;
}
input[type='radio'] label:hover:after {color: #c733c5;}
input[type='radio']:checked label:after, input[type='radio']:checked label:hover:after {color: #c733c5;}
ul.select{margin-top:30px}
ul.select li{height:46px; line-height:1.5; margin:0 0 20px 0}PNG：
ok，这里细心的基本都可以看到我的js是写的不完整的，毕竟很多，这样的排列的组合是很多的，所以感兴趣的可以直接自己补充，他的预算次数是2的3次方，那么如果有五个选项九个页面的话那就是5的9次方，所以我是没有那么多的精力实现的，感兴趣的可以自己慢慢的补充！也可以用在别的地方，例如：追女朋友！
