jquery+css3问卷答题卡翻页动画效果示例

CSS3+jQuery制作立体翻页时间展示动画特效。该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。

这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色。使用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 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>
      <!--6-->
      <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-10-24

jquery判断复选框是否选中进行答题提示特效

本文实例讲述了jquery判断复选框是否选中进行答题提示特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中 第二步:根据复选框的选中情况给出相应的提示 二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

jQuery实现的在线答题功能

有时在网页中要加入一个在线测试功能,例如在线调查,在线测试各类知识等应用,这类应用需要用到很多前后端技能.今天我给大家分享一个基于jQuery的前端应用--测试答题功能. HTML 首先载入jquery库文件和quiz.js以及所需的CSS样式文件styles.css. <script src="jquery.js"></script> <script src="quiz.js"></script> <link

基于jQuery实现复选框是否选中进行答题提示

最近是在项目需求中遇到的功能点,根据用户选择的选项给出相应的提示,下面给出了测试程序的效果图,看看是不是很满意,如果大家觉得还不错,请继续查看全文. 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中 第二步:根据复选框的选中情况给出相应的提示 二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&

JVM 堆和栈的区别

栈内存: 程序在栈内存中运行 栈中存的是基本数据类型和堆中对象的引用 栈是运行时的单元 栈解决程序的运行问题,即程序如何执行,或者说如何处理数据 一个线程一个独立的线程栈 堆内存:  程序运行所需的大部分数据保存在栈内存中 堆中存的是对象 堆是存储的单元,堆只是一块共享的内存 堆解决的是数据存储的问题,即数据怎么放,放在哪儿 所有线程共享堆内存 Java中的参数传递( 传值呢?还是传引用? ): 程序运行永远都是在栈中进行的,因而参数传递时,只存在传递基本类型和对象引用的问题,不会直接传递对象本

Java中堆和栈的区别详解

当一个人开始学习Java或者其他编程语言的时候,会接触到堆和栈,由于一开始没有明确清晰的说明解释,很多人会产生很多疑问,什么是堆,什么是栈,堆和栈有什么区别?更糟糕的是,Java中存在栈这样一个后进先出(Last In First Out)的顺序的数据结构,这就是java.util.Stack.这种情况下,不免让很多人更加费解前面的问题.事实上,堆和栈都是内存中的一部分,有着不同的作用,而且一个程序需要在这片区域上分配内存.众所周知,所有的Java程序都运行在JVM虚拟机内部,我们这里介绍的自然

JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析

本文实例讲述了JS数据类型(基本数据类型.引用数据类型)及堆和栈的区别.分享给大家供大家参考,具体如下: js数据类型:基本数据类型和引用数据类型(文章最下面会介绍各类型的基础以及注意事项) 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值 基本数据类型:数字(Number).字符串(String).布尔(Boolean).空(Null).未定义(Undefined) 引用数据类型:也就是对

浅析C语言中堆和栈的区别

在计算机领域,堆栈是一个不容忽视的概念,我们编写的C语言程序基本上都要用到.但对于很多的初学着来说,堆栈是一个很模糊的概念. 堆栈:一种数据结构.一个在程序运行时用于存放的地方,这可能是很多初学者的认识,因为我曾经就是这么想的和汇编语言中的堆栈一词混为一谈.我身边的一些编程的朋友以及在网上看帖遇到的朋友中有好多也说不清堆栈,所以我想有必要给大家分享一下我对堆栈的看法,有说的不对的地方请朋友们不吝赐教,这对于大家学习会有很大帮助. 一.前言: C语言程序经过编译连接后形成编译.连接后形成的二进制映

C++堆和栈的区别与联系讲解

C++中,内存分为5个区:堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈:是由编译器在需要时自动分配,不需要时自动清除的变量存储区.通常存放局部变量.函数参数等. 堆:是由new分配的内存块,由程序员释放(编译器不管),一般一个new与一个delete对应,一个new[]与一个delete[]对应.如果程序员没有释放掉,        资源将由操作系统在程序结束后自动回收. 自由存储区:是由malloc等分配的内存块,和堆十分相似,用free来释放. 全局/静态存储区:全局变量和静态变量

java中堆和栈的区别分析

堆和栈是Java数据结构里非常重要的概念,本文较为详细的分析了二者之间的区别.供大家参考.具体如下: Java的堆是一个运行时数据区,类的(对象从中分配空间.这些对象通过new.newarray.anewarray和multianewarray等 指令建立,它们不需要程序代码来显式的释放.堆是由垃圾回收来负责的,堆的优势是可以动态地分配内存大小,生存期也不必事先告诉编译器,因为它是在运行时 动态分配内存的,Java的垃圾收集器会自动收走这些不再使用的数据.但缺点是,由于要在运行时动态分配内存,存

关于C++使用指针 堆和栈的区别分析

数据在内存的存放有以下几种形式 1.栈区--由编译器自动分配并且释放,该区域一般存放函数的参数值,局部变量的值等, 2.堆区--一般由程序员分配释放,如果程序员不释放,程序结束的时候才会被操作系统回收,3.寄存器区--用来保存栈顶指针和指令指针4.全局去--也是静态区,全局变量和静态变量都是存储在一起的,初始化的全局变量和静态变量都存储在一块,为初始化的全局变量和静态变量在相邻的另一个区域,程序结束后由系统释放.5.文字常量区--常量字符串就是放在这里的,程序结束后由系统释放,6.程序代码区--

浅谈C#中堆和栈的区别(附上图解)

线程堆栈:简称栈 Stack 托管堆: 简称堆 Heap 使用.Net框架开发程序的时候,我们无需关心内存分配问题,因为有GC这个大管家给我们料理一切.如果我们写出如下两段代码: 代码段1: public int AddFive(int pValue) { int result; result = pValue + 5; return result; } 代码段2: public class MyInt { public int MyValue; } public MyInt AddFive(i

JAVA中堆、栈,静态方法和非静态方法的速度问题

一.堆和栈的速度性能分析 堆和栈是JVM内存模型中的2个重要组成部分,自己很早以前也总结过堆和栈的区别,基本都是从存储内容,存储空间大小,存储速度这几个方面来理解的,但是关于堆和栈的存储速度,只知道堆存储速度慢,栈存储速度快,至于为什么堆比栈的存取速度慢,并没有特别深入的研究,从网上也找了很多资料,但很多理由并不太认同,这里也列举一些,并结合自己的理解来分析,如果不正确欢迎指正. 1.从分配的角度分析 java中栈的大小和生命周期在编译期间就确定了的(可以参考之前写的一篇JVM内存模型中的分析,

C/C++ 中堆和栈及静态数据区详解

C/C++ 中堆和栈及静态数据区详解   五大内存分区 在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区.下面分别来介绍: 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数等. 堆,就是那些由new分配的内存块,他们的释放编译器不去管,由我们的应用程序去控制,一般一个new就要对应一个delete.如果程序员没有释放掉,那么在程序结束后,操作系统会自动回收. 自由存储区,就是那些由malloc等分