这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用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. MongoDB学习笔记四—增删改文档下

    $slice 如果希望数组的最大长度是固定的,那么可以将 $slice 和 $push 组合在一起使用,就可以保证数组不会超出设定好的最大长度.$slice 的值必须是负整数. 假设$slice的值为 ...

  2. linux下配置matlab运行环境(MCR)

    在安装好的matlab下有MCR(MatlabCompilerRuntime)在matlab2011/toolbox/compiler/deploy/glnxa64下找到MCRInstaller.zi ...

  3. ABP源码分析十四：Entity的设计

    IEntity<TPrimaryKey>: 封装了PrimaryKey:Id,这是一个泛型类型 IEntity: 封装了PrimaryKey:Id,这是一个int类型 Entity< ...

  4. No result defined for action com.lk.IndexAction and result success

    意图访问一个 /es/index.action 竟然出现: [SAE ] ERROR [05-11 13:54:32] [http-80-5] com.opensymphony.xwork2.util ...

  5. hibernate学习笔记之二 基本环境搭建

    1.创建一个普通的java项目 2.加入Hibernate所有的jar包 3.建立包名com.bjpowernode.hibernate 4.建立实体类User.java package com.bj ...

  6. npm常用命令

    npm常用命令 环境:win7 npm 是什么 NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜 ...

  7. SQL-从数据类型 varchar 转换为 bigint 时出错的解决方案

    解决

  8. js和jquery实现简单的选项卡

    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...

  9. Ninesky源代码从Codeplex迁移到开源中国

    原来Ninesky代码一直发在Codeplex.com上,最近两三个星期了代码一直迁入不上去,网站访问也经常出错. 所以把代码放到开源中国去了,项目地址https://git.oschina.net/ ...

  10. 1. 使用Filter 作为控制器

    最近整理一下学习笔记,并且准备放到自己的博客上.也顺便把Struts2 复习一遍 1. MVC 设计模式概览 实现 MVC(Model.View.Controller) 模式的应用程序由 3 大部分构 ...