这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用jQuery和CSS3，适合HTML5浏览器。

效果展示 http://hovertree.com/texiao/jquery/87/

源码下载：
http://hovertree.com/h/bjaf/sym1l16q.htm

效果图如下：

代码如下：

<!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>

            <!---->

            <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>

转自：http://hovertree.com/h/bjaf/ml26ksm5.htm

特效推荐：http://www.cnblogs.com/jihua/p/webfront.html

jquery css3问卷答题卡翻页动画效果的更多相关文章

  1. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  2. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  3. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  4. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  5. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离​1. [代码]jquery ...

  6. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  7. 基于jQuery在线问卷答题系统代码

    分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  9. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

随机推荐

  1. 转：MSSQL还原单mdf文件报1813错误

    原文地址:http://www.cnblogs.com/clownkings/p/4950865.html 解决办法: 1.首先要备份好mdf文件,如果他没了经理非吃了你不可.都不吐骨头的. 2.在数 ...

  2. Linux监控工具介绍系列——vmstat

      说来惭愧,玩Linux这么久了,居然没有玩转vmstat这个命令,对很多指标的具体意义都有点模糊不清,花了点时间好好学习.整理一下这个命令的相关资料.因为这个命令确实比较重要,而且频繁用到. 命令 ...

  3. SEO：权重如何做到从0到1

    SEO:权重如何做到从0到1 [写于2016年9月]我真的好久好久没到我的博客上去看过了,今天突然登上 seo.chinaz.com,搜索 dkplus.iteye.com,发现自己的博客在百度收录中 ...

  4. .Net中的AOP系列之《方法执行前后——边界切面》

    返回<.Net中的AOP>系列学习总目录 本篇目录 边界切面 PostSharp方法边界 方法边界 VS 方法拦截 ASP.NET HttpModule边界 真实案例--检查是否为移动端用 ...

  5. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. JavaScript之web通信

    web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. ...

  7. Failed to stop iptables.service: Unit iptables.service not loaded.

    redhat 7 [root@lk0 ~]# service iptables stop Redirecting to /bin/systemctl stop iptables.service Fai ...

  8. maven repo plugin archiver

    Failure to transfer org.apache.maven:maven-archiver:pom:2.4.1 from http://repo1.maven.org/xxx was ca ...

  9. 使用topshelf包装redis为windows服务

           Redis服务端目前用的是控制台程序运行,部署的时候能作为windows服务后台运行感觉更好.找到一篇文章Running Redis as a Windows Service,利用win ...

  10. 高性能JavaScript--快速响应的用户界面(简要学习笔记三)

    1.浏览器线程:用于执行JavaScript和更新用户界面的进程被称为“浏览器UI线程”.   2. <1>定时器的出现让出UI线程控制权 setTimeout(),setInterval ...