jquery+css3问卷答题卡翻页动画效果示例
CSS3+jQuery制作立体翻页时间展示动画特效。该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色。使用jQuery和CSS3,适合HTML5浏览器。
代码如下:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <title>jQuery+CSS3答题卡翻页效果_何问起</title> <metaname="format-detection"content="telephone=no"/> <metaname="apple-mobile-web-app-capable"content="yes"/> <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <metaname="description"content="何问起"> <metaname="keywords"content="何问起"> <linkhref="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> <bodystyle="background-color:#1fc587"> <divclass="wrapper"> <br/> <h2>jQuery+CSS3翻页效果的调查答题卡</h2> <divid="answer"class="card_wrap"> <!--Q1--> <divclass="card_contcard1"> <divclass="card"> <pclass="question"><span>Q1、</span>你第一门接触的编程语言是?</p> <ulclass="select"> <li> <inputid="q1_1"type="radio"name="r-group-1"> <labelfor="q1_1">JavaScript</label> </li> <li> <inputid="q1_2"type="radio"name="r-group-1"> <labelfor="q1_2">C语言</label> </li> <li> <inputid="q1_3"type="radio"name="r-group-1"> <labelfor="q1_3">Java</label> </li> <li> <inputid="q1_4"type="radio"name="r-group-1"> <labelfor="q1_4">C#</label> </li> <li> <inputid="q1_5"type="radio"name="r-group-1"> <labelfor="q1_5">其他</label> </li> </ul> <divclass="card_bottom"><span><b>1</b>/5</span></div> </div> </div> <!--Q2--> <divclass="card_contcard2"> <divclass="card"> <pclass="question"><span>Q2、</span>你主要从事的开发设计工作是?</p> <ulclass="select"> <li> <inputid="q2_1"type="radio"name="r-group-2"> <labelfor="q2_1">Web前端</label> </li> <li> <inputid="q2_2"type="radio"name="r-group-2"> <labelfor="q2_2">安卓软件开发</label> </li> <li> <inputid="q2_3"type="radio"name="r-group-2"> <labelfor="q2_3">IOS软件开发</label> </li> <li> <inputid="q2_4"type="radio"name="r-group-2"> <labelfor="q2_4">网站、软件维护</label> </li> <li> <inputid="q2_5"type="radio"name="r-group-2"> <labelfor="q2_5">数据库开发管理</label> </li> </ul> <divclass="card_bottom"><aclass="prev">上一题</a><span><b>2</b>/5</span></div> </div> </div> <!--Q3--> <divclass="card_contcard3"> <divclass="card"> <pclass="question"><span>Q3、</span>你最早知道的有关开发的网站是哪个?</p> <ulclass="select"> <li> <inputid="q3_1"type="radio"name="r-group-3"> <labelfor="q3_1">何问起(http://hovertree.com/)</label> </li> <li> <inputid="q3_2"type="radio"name="r-group-3"> <labelfor="q3_2">博客园(http://www.cnblogs.com/)</label> </li> <li> <inputid="q3_3"type="radio"name="r-group-3"> <labelfor="q3_3">柯乐义(http://keleyi.com/)</label> </li> <li> <inputid="q3_4"type="radio"name="r-group-3"> <labelfor="q3_4">CSDN(http://www.csdn.net/)</label> </li> <li> <inputid="q3_5"type="radio"name="r-group-3"> <labelfor="q3_5">其他</label> </li> </ul> <divclass="card_bottom"><aclass="prev">上一题</a><span><b>3</b>/5</span></div> </div> </div> <!--Q4--> <divclass="card_cont"> <divclass="card"> <pclass="question"><span>Q4、</span>你开发中使用的主要操作系统是?</p> <ulclass="select"> <li> <inputid="q4_1"type="radio"name="r-group-4"> <labelfor="q4_1">Windows10</label> </li> <li> <inputid="q4_2"type="radio"name="r-group-4"> <labelfor="q4_2">Windows7</label> </li> <li> <inputid="q4_3"type="radio"name="r-group-4"> <labelfor="q4_3">Linux</label> </li> <li> <inputid="q4_4"type="radio"name="r-group-4"> <labelfor="q4_4">MacOS</label> </li> <li> <inputid="q4_5"type="radio"name="r-group-4"> <labelfor="q4_5">其他</label> </li> </ul> <divclass="card_bottom"><aclass="prev">上一题</a><span><b>4</b>/5</span></div> </div> </div> <!--Q5--> <divclass="card_cont"> <divclass="card"> <pclass="question"><span>Q5、</span>你觉得下面哪个栏目最实用?</p> <ulclass="select"> <li> <inputid="q5_1"type="radio"name="r-group-5"> <labelfor="q5_1">网页特效http://hovertree.com/menu/texiao/</label> </li> <li> <inputid="q5_2"type="radio"name="r-group-5"> <labelfor="q5_2">在线题库http://hovertree.com/tiku/</label> </li> <li> <inputid="q5_3"type="radio"name="r-group-5"> <labelfor="q5_3">jQuery下载http://hovertree.com/h/bjaf/ati6k7yk.htm</label> </li> <li> <inputid="q5_4"type="radio"name="r-group-5"> <labelfor="q5_4">图片http://hovertree.com/hvtimg/</label> </li> <li> <inputid="q5_5"type="radio"name="r-group-5"> <labelfor="q5_5">代码http://hovertree.com/code/</label> </li> </ul> <divclass="card_bottom"><aclass="prev">上一题</a><span><b>5</b>/5</span></div> </div> </div> <!--6--> <divclass="card_cont"> <divclass="card"> <pclass="question"></p> <ulclass="select"> <li>感谢您的参与!<br/> 更多信息请访问何问起网。 <br/> <ahref="http://hovertree.com"target="_blank">何问起首页</a> </li> </ul> <divclass="card_bottom"><aclass="prev">上一题</a></div> </div> </div> </div><!--/card_wrap--> <br/><br/> <divstyle="text-align:center;"> <ahref="http://hovertree.com">首页</a> <ahref="http://hovertree.com/texiao/">特效库</a> <ahref="http://hovertree.com/h/bjaf/ml26ksm5.htm">原文</a> </div> </div> <scriptsrc="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script> <scriptsrc="http://hovertree.com/texiao/jquery/87/hovertreeanswer.js"></script> <script> $(function(){ $("#answer").answerSheet({}); }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。