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>

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

Javascript 相关文章推荐
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
You might like
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
详解php的socket通信
2015/08/11 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
采用call方式实现js继承
2014/05/20 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
用python绘制樱花树
2020/10/09 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
什么是索引指示器
2012/08/20 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
七一慰问简报
2015/07/20 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技