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 相关文章推荐
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
微信小程序入门之指南针
Oct 22 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
PHP的5个安全措施小结
2012/07/17 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python的另外几种语言实现
2015/01/29 Python
详解Python迭代和迭代器
2016/03/28 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Python中的heapq模块源码详析
2019/01/08 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Java中实现多态的机制
2015/08/09 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
行政经理岗位职责
2013/11/09 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
刑事撤诉申请书
2015/05/18 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python
Python数组变形的几种实现方法
2022/05/30 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers