以下是 jQuery手机端问卷调查代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/toup.css" />
<link rel="stylesheet" href="swiper/swiper.min.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/fontSize.js"></script>
<title>jQuery手机端问卷调查代码</title>
</head>
<body>
<section class="toup" id="t1">
<!-- <div class="logo">
<img src="images/logo.png"/>
</div> -->
<div class="swipers">
<div class="con">
<h1>lamoda调查问卷</h1>
<p>感谢光临lamoda体验中心！</p>
<p>3D时尚定制鞋开创者lamoda是国内领先的鞋类私人订制品牌，致力于为您设计、生产您想要的鞋、舒适的鞋。</p>
<p>lamoda自推出“DIY自主设计”以来，受到了众多客户朋友的喜爱与追捧，为了让“DIY”能够更好地满足您对鞋子的所有向往，我们非常期待能知道您的想法。</p>
<p>坐下来，品一杯咖啡，细细地想一想，您心中的lamodaDIY，是什么样的呢？</p>
</div>
<a href="javascript:;" class="jion">参加本调查</a>
</div>
</section>
<section class="toup" id="t2">
<!-- <div class="logo">
<img src="images/logo.png"/>
</div> -->
<div class="swipers">
<!-- 上下 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>1</span>舒适度（1-5分）</div>
<div class="choose">
<div class="input"><input type="radio" name="score" id="1"/><label for="1">5分 必须非常舒适，可放弃其他方面要求</label></div>
<div class="input"><input type="radio" name="score" id="2"/><label for="2">4分 </label></div>
<div class="input"><input type="radio" name="score" id="3"/><label for="3">1分 </label></div>
<div class="input"><input type="radio" name="score" id="4"/><label for="4">1分 </label></div>
<div class="input"><input type="radio" name="score" id="5"/><label for="5">1分 只要其他方面可以满足，舒适度无所谓</label></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>2</span>款式独特性（1-5分）</div>
<div class="choose">
<div class="input"><input type="radio" name="score1" id="6"/><label for="6">5分 款式必须非常独特，其他地方买不到，可放弃其他方面要求</label></div>
<div class="input"><input type="radio" name="score1" id="7"/><label for="7">4分 </label></div>
<div class="input"><input type="radio" name="score1" id="8"/><label for="8">1分 </label></div>
<div class="input"><input type="radio" name="score1" id="9"/><label for="9">1分 </label></div>
<div class="input"><input type="radio" name="score1" id="10"/><label for="10">1分 只要其他方面可以满足，款式独特性无所谓</label></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>3</span>款式专属性（1-5分）</div>
<div class="choose">
<div class="input"><input type="radio" name="score2" id="11"/><label for="11">5分 必须能够体现个人属性（纪念日、图像），可放弃其他方面要求 </label></div>
<div class="input"><input type="radio" name="score2" id="12"/><label for="12">4分 </label></div>
<div class="input"><input type="radio" name="score2" id="13"/><label for="13">3分 </label></div>
<div class="input"><input type="radio" name="score2" id="14"/><label for="14">2分 </label></div>
<div class="input"><input type="radio" name="score2" id="15"/><label for="15">1分 只要其他方面可以满足，专属性无所谓</label></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>4</span>大牌或明星同款（1-5分）</div>
<div class="choose">
<div class="input"><input type="radio" name="score3" id="16"/><label for="16">5分 必须接近某大品牌或某明星的同款，可放弃其他方面要求 </label></div>
<div class="input"><input type="radio" name="score3" id="17"/><label for="17">4分 </label></div>
<div class="input"><input type="radio" name="score3" id="18"/><label for="18">3分 </label></div>
<div class="input"><input type="radio" name="score3" id="19"/><label for="19">2分 </label></div>
<div class="input"><input type="radio" name="score3" id="20"/><label for="20">1分 只要其他方面可以满足，是否大牌或明星同款无所谓</label></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>5</span>材料可变性（1-5分）</div>
<div class="choose">
<div class="input"><input type="radio" name="score3" id="21"/><label for="21">5分 必须有非常多的材料可供选择，可放弃其他方面要求</label></div>
<div class="input"><input type="radio" name="score3" id="22"/><label for="22">4分 </label></div>
<div class="input"><input type="radio" name="score3" id="23"/><label for="23">3分 </label></div>
<div class="input"><input type="radio" name="score3" id="24"/><label for="24">2分 </label></div>
<div class="input"><input type="radio" name="score3" id="25"/><label for="25">1分 只要其他方面可以满足，有2-3种经典材料即可</label></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="scores">
<h3>对于lamodaDIY的鞋子，您在以下几个方面的需求程度如何呢？</h3>
<div class="f"><span>6</span>请问您的年龄？</div>
<div class="choose">
<div class="input"><input type="radio" name="score4" id="26"/><label for="26">20-30 </label></div>
<div class="input"><input type="radio" name="score4" id="27"/><label for="27">30-40 </label></div>
<div class="input"><input type="radio" name="score4" id="28"/><label for="28">40-50</label></div>
<div class="input"><input type="radio" name="score4" id="29"/><label for="29">50-60</label></div>
<div class="input"><input type="radio" name="score4" id="30"/><label for="30">60以上</label></div>
</div>
</div>
</div>
</div>
<div class="preNexts">
<div class="swiper-button-prev"><div class="pre"></div>上一题</div>
<div class="swiper-button-next"><div class="next"></div>下一题</div>
</div>
</div>
<!-- 上下end -->
</div>
</section>
<section class="toup" id="t3">
<!-- <div class="logo">
<img src="images/logo.png"/>
</div> -->
<div class="swipers">
<div class="con con1">
<input type="number" name="" class="phone" placeholder="手机号码"/>
<div class="smile">
<p>非常感谢您的配合!</p>
<p>我们将赠送您100个lamoda商城积分，请填写您的商城账户手机号，谢谢!</p>
</div>
</div>
<a href="javascript:;" class="tijiao">提交调查</a>
</div>
</section>
<script src="swiper/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
loop: true,
onReachEnd: function(swiper){
$("#t2").hide();
$("#t3").show();
}
});
$("#t2,#t3").hide();
$("a.jion").on("click",function(){
$("#t1").hide();
$("#t2").show();
});
$(".swiper-container label,.swiper-container input").click(function(){
var this_active = $(this).parents(".swiper-slide").index();
setTimeout(function(){
mySwiper.slideTo(this_active+1,1000)
},500);
});
$('.swiper-button-next').click(function(){
if(mySwiper .isEnd){
$("#t2").hide();
$("#t3").show();
}
})
</script>
</body>
</html>JS代码(fontSize.js):
// 定义基准字体new function (){
var _self = this;
_self.width = 640;
//设置默认最大宽度 _self.fontSize = 100;
//默认字体大小 _self.widthProportion = function (){
var p = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
return p > 1 ? 1:p < 0.5 ? 0.5:p;
}
;
_self.changePage = function (){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:" + _self.widthProportion() * _self.fontSize + "px");
}
_self.changePage();
window.addEventListener('resize',function (){
_self.changePage();
}
,false);
}
;
CSS代码(reset.css):
@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,rem,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,rembed,figure,figcaption,.footer,.header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;-webkit-appearance:none;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,.footer,.header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
a{text-decoration:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;display:inline-block;color:#595757;}
*{outline:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
a:focus,a:active,a:link,a:visited,a:hover{outline:none;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
input{outline:none;-webkit-tap-highlight-color:rgba(255,0,0,0);text-decoration:none;color:#595757;}
select{color:#595757;}
/*清除浮动*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix{display:block;}
body{font-family:Helvetica;background:#e3e9e9;color:#595757;}
CSS代码(toup.css):
.toup{width:100%;height:100%;overflow:hidden;position:relative;}
.logo{width:1.47rem;height:1.58rem;margin:0.35rem auto 0 auto;}
.logo img{display:block;max-width:1.47rem;}
.swipers{margin:0.2rem 0.5rem 0 0.5rem;}
.swiper-container{width:100%;height:100%;margin-left:auto;margin-right:auto;}
.swiper-slide{border:3px solid #fff;border-radius:10px;padding:0.35rem 0.2rem 0.6rem 0.2rem;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-shadow:0px 0px 10px #9bb5c4 inset;-moz-box-shadow:0px 0px 10px #9bb5c4 inset;box-shadow:0px 0px 10px #9bb5c4 inset;box-sizing:border-box;overflow:hidden;}
.scores{width:100%;height:6.28rem;}
.scores h3{font-size:0.32rem;line-height:0.48rem;word-wrap:break-word;display:block;text-align:justify;}
.scores .f{margin:0.2rem 0 0.4rem 0;font-size:0.25rem;width:100%;}
.scores .f span{display:inline-block;height:0.75rem;width:0.75rem;line-height:0.75rem;font-size:0.42rem;color:#fff;background:#4e3821;text-align:center;border-radius:100%;margin-right:0.15rem;}
.choose{width:100%;}
.choose .input{margin-bottom:0.25rem;position:relative;}
.choose input[type="radio"]{position:absolute;left:0;top:0.04rem;vertical-align:middle;}
.choose label{font-size:0.21rem;display:block;padding-left:0.4rem;line-height:0.4rem;}
.preNexts{width:100%;height:0.88rem;border:1px solid #cfd5da;border-radius:0.1rem;margin:0.3rem 0 0.55rem 0;position:relative;background:#e3e7e7;box-sizing:border-box;}
.swiper-button-next,.swiper-button-prev{width:45%;height:0.88rem;float:left;line-height:0.88rem;font-size:0.29rem;color:#637d96;}
.swiper-button-next{float:right;}
.swiper-button-prev .pre,.swiper-button-next .next{width:0.96rem;height:0.86rem;float:left;background:url(../images/pre.png) center center no-repeat;background-size:0.55rem;display:block;border-right:1px solid #b8bdc1;margin-right:0.25rem;}
.swiper-button-next .next{float:right;margin-left:0.25rem;background:url(../images/next.png) center center no-repeat;border-left:1px solid #b8bdc1;border-right:0;background-size:0.55rem;margin-right:0;}
.con{border:3px solid #fff;border-radius:10px;padding:0.35rem 0.4rem 0.6rem 0.4rem;-webkit-box-shadow:0px 0px 10px #9bb5c4 inset;-moz-box-shadow:0px 0px 10px #9bb5c4 inset;box-shadow:0px 0px 10px #9bb5c4 inset;box-sizing:border-box;}
.con h1{font-size:0.36rem;text-align:center;line-height:0.48rem;margin-bottom:0.5rem;}
.con p{line-height:0.36rem;font-size:0.24rem;margin-bottom:0.30rem;text-align:justify;word-wrap:break-word;}
.swipers a.jion,.swipers a.tijiao{height:0.88rem;width:100%;box-sizing:border-box;line-height:0.88rem;text-align:center;border-radius:0.1rem;border:1px solid #cdd4d8;display:block;font-size:0.28rem;color:#637d96;margin:0.35rem 0 0.55rem 0;background:#f2f4f3;}
.con.con1{background:#f8f9fa;}
.con .phone{width:100%;height:0.63rem;border:1px solid #c5c8cc;border-radius:0.12rem;line-height:0.63rem;font-size:0.27rem;padding:0 0.2rem;background:#e4e6e9;box-sizing:border-box;margin-bottom:0.8rem;}
.smile{width:100%;padding-top:1.78rem;background:url(../images/smile.png) right top no-repeat;background-size:2.19rem;}
分享到QQ
分享到微博
微信扫一扫
