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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
简单的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中取得image按钮传递的name值
2006/10/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
Python 私有函数的实例详解
2017/09/11 Python
浅析python协程相关概念
2018/01/20 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python多线程正确用法实例解析
2020/05/30 Python
Python执行时间的几种计算方法
2020/07/31 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
关于递归的一道.NET面试题
2013/05/12 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
出国留学自荐信
2013/10/25 职场文书
求职自荐信格式
2013/12/04 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
自我鉴定标准格式
2014/03/19 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers