这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用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. 电脑新建svn仓库

    步骤1:安转svg: 注意事项: 安装的时候选择:Modify 安装到以下图片的步骤时: 黄色区域选择: 步骤2:新建svn仓库文件夹(本教程例子:D:\svn-5gpos),选择文件夹右键,点击下图 ...

  2. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  3. 《开源博客Q群》和《NET上海Q群》入群须知

    开源博客Q群 群名:<嗨-博客> 群号:469075305(已满) 491585006(New) 群简介:“我们每个猿都有一个搭建自己独立博客的梦”. 入群要求: 您可以是HR,私聊管理员 ...

  4. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  5. ubuntu中查看已有的mysql用户并修改用户名和密码

    你先进入/etc/mysql 然后该目录下会有一个debian.cnf文件,用sudo cat debian.cnf查看里面的内容. 如果用户名为 debian-sys-maint 使用 mysql ...

  6. redis成长之路——（五）

    单例.哨兵.Cluster redis应用广泛,主要体现于实际场景的可用化,但是对于码农来说初步入手很多理念难以理解:码农的想法就是:为什么我要管那么多,我只想用,能用就行!所以必须将三个场景透明化. ...

  7. sublime text 插件

    html-css-js prettify html5 anaconda pretty json JavaScript Completions SqlBeautifier Emmet Css Snipp ...

  8. Java关键字：static

    通常,当创建类时,就是在描述那个类的外观和行为.只有用new创建类的对象时,才分配数据存储空间,方法才能被调用.但往往我们会有下面两种需求: 1.我想要这样一个存储空间:不管创建多少对象,无论是不创建 ...

  9. ASP.NET Core管道深度剖析（2）：创建一个“迷你版”的管道来模拟真实管道请求处理流程

    从<ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求>我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从总体设计来讲是非常简单的,但 ...

  10. 从零开始编写自己的C#框架（17）——Web层后端首页

    后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显 ...