jquery+css3問卷答題卡翻頁動(dòng)畫效果示例
更新時(shí)間：2016年10月26日 09:23:17 作者：計(jì)劃
本篇文章主要介紹了jquery css3問卷答題卡翻頁動(dòng)畫效果，具有一定的參考價(jià)值，有需要的朋友可以了解一下。
CSS3+jQuery制作立體翻頁時(shí)間展示動(dòng)畫特效。該翻頁插件的外觀非常華麗喜慶,非常適合產(chǎn)品活動(dòng)或者育兒網(wǎng)站使用。
這個(gè)選項(xiàng)調(diào)查的特效以選項(xiàng)卡的形式，每答完一道題目自動(dòng)切換到下一條，頗具特色。使用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è)計(jì)工作是？</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)站、軟件維護(hù)</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)站是哪個(gè)？</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>你覺得下面哪個(gè)欄目最實(shí)用？</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 />
更多信息請?jiān)L問何問起網(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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 如何使用CSS3+JQuery實(shí)現(xiàn)懸浮墻式菜單
- jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
- CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例
- 基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果
- jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
- CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
- 如何使用CSS3和JQuery easing 插件制作絢麗菜單
相關(guān)文章
地址欄射擊游戲!對，你沒看錯(cuò)，就是在地址欄上玩的游戲，有圖有真相！之前在網(wǎng)上看到這個(gè)小游戲，可惜在墻外，中午研究了一下，搬到國內(nèi)來了，看看吧！2011-03-03
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了如何用jquery控制表格奇偶行及活動(dòng)行顏色,需要的朋友可以參考下2014-04-04
jquery中封裝了一些ajax請求的方法，很實(shí)用,本文將以此引入一個(gè)實(shí)例，對jquery中ajax請求的方法進(jìn)行詳細(xì)介紹，需要了解更多的朋友可以參考下2012-11-11
jQuery簡單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊的代碼，非常的好用，這里推薦給大家，有需要的小伙伴參考下。2015-04-04
尺寸小、使用簡單方便（Write Less, Do More，吃得少干得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中2012-04-04
jQuery UI Dialog 創(chuàng)建友好的彈出對話框?qū)崿F(xiàn)代碼
jQuery UI Dialog是jQuery UI的彈出對話框組件，使用它可以創(chuàng)建各種美觀的彈出對話框；它可以設(shè)置對話框的標(biāo)題、內(nèi)容，并且使對話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉；平常主要用來替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04
jQuery simplePage+AJAX plus分頁插件用法實(shí)例
這篇文章主要介紹了jQuery simplePage+AJAX plus分頁插件用法,結(jié)合實(shí)例形式分析了jQuery基于extend擴(kuò)展實(shí)現(xiàn)分頁插件的具體技巧,需要的朋友可以參考下2016-02-02
基于jQuery的輸入框無值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
在自己的網(wǎng)頁中，常常要實(shí)現(xiàn)指定樣式的輸入框，當(dāng)輸入框中沒有輸入或只輸入空格等無效信息時(shí)，自動(dòng)顯示指定的文本，以提醒用戶應(yīng)該如何操作，下面是具體實(shí)現(xiàn)方法，僅供參考。2011-01-01