jquery+css3問卷答題卡翻頁動畫效果示例
更新時間：2016年10月26日 09:23:17 作者：計劃
本篇文章主要介紹了jquery css3問卷答題卡翻頁動畫效果，具有一定的參考價值，有需要的朋友可以了解一下。
CSS3+jQuery制作立體翻頁時間展示動畫特效。該翻頁插件的外觀非常華麗喜慶,非常適合產(chǎn)品活動或者育兒網(wǎng)站使用。
這個選項調(diào)查的特效以選項卡的形式，每答完一道題目自動切換到下一條，頗具特色。使用jQuery和CSS3，適合HTML5瀏覽器。
代碼如下：
<!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 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翻頁效果的調(diào)查答題卡</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>你主要從事的開發(fā)設(shè)計工作是？</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">安卓軟件開發(fā)</label>
</li>
<li>
<input id="q2_3" type="radio" name="r-group-2">
<label for="q2_3">IOS軟件開發(fā)</label>
</li>
<li>
<input id="q2_4" type="radio" name="r-group-2">
<label for="q2_4">網(wǎng)站、軟件維護</label>
</li>
<li>
<input id="q2_5" type="radio" name="r-group-2">
<label for="q2_5">數(shù)據(jù)庫開發(fā)管理</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>你最早知道的有關(guān)開發(fā)的網(wǎng)站是哪個？</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>你開發(fā)中使用的主要操作系統(tǒng)是？</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">網(wǎng)頁特效 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 />
更多信息請訪問何問起網(wǎng)。
<br />
<a 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 >首頁</a>
<a >特效庫</a>
<a >原文</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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery實現(xiàn)點擊鏈接彈出層效果，其基本實現(xiàn)原理是這樣的：jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對jq點擊彈出層相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實現(xiàn)用戶登錄驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
現(xiàn)在的網(wǎng)站，在一個網(wǎng)頁中有異步請求甚至許多個異步請求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能，使網(wǎng)頁應(yīng)用更接近于桌面應(yīng)用2012-05-05
下面小編就為大家?guī)硪黄褂胘query獲取url及url參數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法【推薦】
本文主要介紹了實現(xiàn)點擊下箭頭變上箭頭來回切換的兩種方法，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
下拉菜單是網(wǎng)站導(dǎo)航常用的表現(xiàn)形式之一，能夠呈現(xiàn)更多的導(dǎo)航內(nèi)容。如果網(wǎng)站能夠設(shè)計出有吸引力的網(wǎng)站導(dǎo)航，將會吸引更多的用戶去瀏覽網(wǎng)站的內(nèi)容2012-06-06
jQuery+html5實現(xiàn)div彈出層并遮罩背景
今天在項目中用到了一個很好的div彈出層效果，jQuery+html5實現(xiàn)div彈出層并遮罩背景，效果非常棒，拿出來和大家一起分享！2015-04-04
基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法
這篇文章主要介紹了基于jquery的手風(fēng)琴圖片展示效果實現(xiàn)方法,涉及jQuery基于事件實現(xiàn)改變css樣式的方法,非常具有實用價值,需要的朋友可以參考下2014-12-12
最好的jquery列表拖動排列自定義拖動層排列。當(dāng)點擊或拖動列表時，可以自定義隨意拖放列表模塊到相應(yīng)位置2014-06-06
當(dāng)打開頁面或者刷新頁面后等待兩秒鐘，會在底部滑出可最小化的提示層?；鰧影胪该?，可關(guān)閉再現(xiàn)。應(yīng)用范圍很廣，比如彈出廣告、彈出注冊層、彈出最新消息等，實現(xiàn)的jquery代碼比較簡單2013-10-10