首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onOctober 26, 2016

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

计划

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
关于Jquery中的事件绑定总结
Oct 26 #Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 #Javascript
理解JavaScript原型链
Oct 25 #Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 #Javascript
二维数组(2) decorator(1) 安卓(1) 嵌套(1) 装饰器(1) 查找算法(1) translation(2) 分块(1) 循环(3) 网页解析(1)
You might like
MySQL连接数超过限制的解决方法
2011/07/17 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP反向代理类代码
2014/08/15 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
JS 继承实例分析
2008/11/04 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析（详细步骤）
2017/11/10 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python增加图像对比度的方法
2019/07/12 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
美国诺德斯特龙百货官网：Nordstrom
2016/08/23 全球购物
Charlotte Tilbury澳大利亚官网：英国美妆品牌
2018/10/05 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
拓展培训心得体会
2014/01/04 职场文书
七夕活动策划方案
2014/08/16 职场文书
联谊会开场白
2015/06/01 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
python字符串的多行输出的实例详解
2021/06/08 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python