jquery+css3 설문지 답변 카드 페이지 넘김 애니메이션 효과 예
- 高洛峰원래의
- 2016-12-08 17:11:521437검색
CSS3+jQuery는 3차원 페이지 넘김 시간 표시 애니메이션 특수 효과를 만듭니다. 이 페이지 넘김 플러그인의 외관은 매우 화려하고 축제적이어서 제품 이벤트나 육아 사이트에 매우 적합합니다.
이 옵션 설문조사의 특수 효과는 각 질문에 답변한 후 자동으로 다음 질문으로 전환되는 방식으로 매우 독특합니다. HTML5 브라우저에 적합한 jQuery 및 CSS3를 사용합니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery+CSS3答题卡翻页效果_何问起</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="http://hovertree.com/texiao/jquery/87/hovertreeanswer.css" rel="stylesheet" />
<style>h2{color:white;text-align:center;}a{color:deeppink;font-size:16px;}</style>
</head>
<body style="background-color:#1fc587">
<div class="wrapper">
<br />
<h2>jQuery+CSS3翻页效果的调查答题卡</h2>
<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">
<label for="q1_1">JavaScript</label>
</li>
<li>
<input id="q1_2" type="radio" name="r-group-1">
<label for="q1_2">C语言</label>
</li>
<li>
<input id="q1_3" type="radio" name="r-group-1">
<label for="q1_3">Java</label>
</li>
<li>
<input id="q1_4" type="radio" name="r-group-1">
<label for="q1_4">C#</label>
</li>
<li>
<input id="q1_5" type="radio" name="r-group-1">
<label for="q1_5">其他</label>
</li>
</ul>
<div class="card_bottom"><span><b>1</b>/5</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">
<label for="q2_1">Web前端</label>
</li>
<li>
<input id="q2_2" type="radio" name="r-group-2">
<label for="q2_2">安卓软件开发</label>
</li>
<li>
<input id="q2_3" type="radio" name="r-group-2">
<label for="q2_3">IOS软件开发</label>
</li>
<li>
<input id="q2_4" type="radio" name="r-group-2">
<label for="q2_4">网站、软件维护</label>
</li>
<li>
<input id="q2_5" type="radio" name="r-group-2">
<label for="q2_5">数据库开发管理</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>2</b>/5</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">
<label for="q3_1">何问起（http://hovertree.com/）</label>
</li>
<li>
<input id="q3_2" type="radio" name="r-group-3">
<label for="q3_2">博客园（http://www.cnblogs.com/）</label>
</li>
<li>
<input id="q3_3" type="radio" name="r-group-3">
<label for="q3_3">柯乐义（http://keleyi.com/）</label>
</li>
<li>
<input id="q3_4" type="radio" name="r-group-3">
<label for="q3_4">CSDN（http://www.csdn.net/）</label>
</li>
<li>
<input id="q3_5" type="radio" name="r-group-3">
<label for="q3_5">其他</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>3</b>/5</span></div>
</div>
</div>
<!--Q4-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q4、</span>你开发中使用的主要操作系统是？</p>
<ul class="select">
<li>
<input id="q4_1" type="radio" name="r-group-4">
<label for="q4_1">Windows 10</label>
</li>
<li>
<input id="q4_2" type="radio" name="r-group-4">
<label for="q4_2">Windows 7</label>
</li>
<li>
<input id="q4_3" type="radio" name="r-group-4">
<label for="q4_3">Linux</label>
</li>
<li>
<input id="q4_4" type="radio" name="r-group-4">
<label for="q4_4">Mac OS</label>
</li>
<li>
<input id="q4_5" type="radio" name="r-group-4">
<label for="q4_5">其他</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>4</b>/5</span></div>
</div>
</div>
<!--Q5-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q5、</span>你觉得下面哪个栏目最实用？</p>
<ul class="select">
<li>
<input id="q5_1" type="radio" name="r-group-5">
<label for="q5_1">网页特效 http://hovertree.com/menu/texiao/ </label>
</li>
<li>
<input id="q5_2" type="radio" name="r-group-5">
<label for="q5_2">在线题库 http://hovertree.com/tiku/ </label>
</li>
<li>
<input id="q5_3" type="radio" name="r-group-5">
<label for="q5_3">jQuery下载 http://hovertree.com/h/bjaf/ati6k7yk.htm</label>
</li>
<li>
<input id="q5_4" type="radio" name="r-group-5">
<label for="q5_4">图片 http://hovertree.com/hvtimg/ </label>
</li>
<li>
<input id="q5_5" type="radio" name="r-group-5">
<label for="q5_5">代码 http://hovertree.com/code/ </label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>5</b>/5</span></div>
</div>
</div>
<!--6-->
<div class="card_cont">
<div class="card">
<p class="question"></p>
<ul class="select">
<li>感谢您的参与！<br />
更多信息请访问何问起网。
<br />
<a href="http://hovertree.com" target="_blank">何问起首页</a>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a></div>
</div>
</div>
</div><!--/card_wrap-->
<br /><br />
<div style="text-align:center;">
<a href="http://hovertree.com">首页</a>
<a href="http://hovertree.com/texiao/">特效库</a>
<a href="http://hovertree.com/h/bjaf/ml26ksm5.htm">原文</a>
</div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script>
<script src="http://hovertree.com/texiao/jquery/87/hovertreeanswer.js"></script>
<script>
$(function(){
$("#answer").answerSheet({});
})
</script>
</body>
</html>성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.