这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用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. Android Weekly Notes Issue #236

    Android Weekly Issue #236 December 18th, 2016 Android Weekly Issue #236 本期内容包括: Google的物联网平台Android ...

  2. hbase协处理器编码实例

    Observer协处理器通常在一个特定的事件(诸如Get或Put)之前或之后发生,相当于RDBMS中的触发器.Endpoint协处理器则类似于RDBMS中的存储过程,因为它可以让你在RegionSer ...

  3. Linux实战教学笔记06:Linux系统基础优化

    第六节 Linux系统基础优化 标签(空格分隔):Linux实战教学笔记-陈思齐 第1章 基础环境 第2章 使用网易163镜像做yum源 默认国外的yum源速度很慢,所以换成国内的. 第一步:先备份 ...

  4. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  5. 分布式服务注册和发现consul 简要介绍

    Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分布式服务注册与发现的方案,Consul的方案更"一站式",内置了服务注册与发现框 架 ...

  6. 系统中没有邮件客户端设置autoLink=email会挂掉的问题

    TextView的autoLink属性为我们提供了很大的便利性,当文本中有网址,邮箱或电话的时候可以让我们方便地执行打电话发邮件等动作,不过也有一些问题,比如说设置autoLink包含email属性, ...

  7. git 常见命令解析

    转载自http://www.rainkong.net/post/git-image.html 之前用的都是svn ,git还是要了解的,万一哪天要用了呢

  8. libuv源码分析前言

    Libevent,libev,libuv三者的区别所在? libevent提供了全套解决方案(事件库,非阻塞IO库,http库,DNS客户端),然而libevent使用全局变量,导致非线程安全.它的w ...

  9. Xshell生成密钥key（用于Linux 免密码登录）

  10. scikit-learn 梯度提升树(GBDT)调参小结

    在梯度提升树(GBDT)原理小结中,我们对GBDT的原理做了总结,本文我们就从scikit-learn里GBDT的类库使用方法作一个总结,主要会关注调参中的一些要点. 1. scikit-learn ...