我们把切图秀定义为基于html5+css3前端切图实现的微场景秀。并且开源切图秀的基础项目，它提供了一个可靠的基础去创建你的项目，你只需要发挥你的创意去组合动画。
作品切图秀被用在了很多项目中，例如跟我们合作的汉口银行，肌肤管家，以及安以轩结婚请帖。
实现原理切图秀基于jquery.fullpage，并且加以改造，融合了非常强大的css3动画库animate.css，通过非常简单的方式可以实现不同动画的调用。
使用方式在head区域加入
<link rel="stylesheet" type="text/css" href="css/animate.css"/><link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/><link rel="stylesheet" type="text/css" href="css/qtx.css"/>在</body>前面加入
<script src="js/jquery-1.7.2.js" ></script><script type='text/javascript' src="js/jquery.fullPage.min.js"></script><script type='text/javascript' src="js/qtx.js"></script>结构规则<div class="fpLayout"><div class="section page1">xxx</div><div class="section page2">xxx</div><div class="section page3">xxx</div></div>添加动画data-fp-animate="zysBounceIn"(必须要加，动画来源于animate.css动画库)
参考文档https://developer.qietu.com/p/CSS3-Animation/tools.html
data-fp-delay="1s"(延迟1秒出现，非必要，不添加为不延迟)
data-fp-duration="1s"（动画时间1s，非必要，不添加默认为1s）
data-fp-iteration="10"（动画反复执行10次，非必要，不添加默认为1次，值为“infinite”代表无限循环。）
<img class="demo" src="images/zys_img3.png" data-fp-delay="0" data-fp-animate="zysBounceIn" data-fp-duration="1s"/>关于loading集成了波浪的进度条显示，它可以真实的反应当前的加载进度，增强用户体验。
<div id="fpLoading"><div id='fpWaveWrap'><div class='fpWave fpWave1'></div><div class='fpWave fpWave2'></div><div class='fpWave fpWave3'></div><div class='fpLogo'><img src="images/qtx2.png"/></div></div><div id="fpLoadingTxt">资源加载<span id="fpLoadingNum">0</span>%</div></div>关于背景音乐集成了背景音乐播放功能，可以点击停止，再点击开启。
<!--背景音乐--><div id="fpMusic"><audio src="mp3/WithanOrchid.mp3" preload="preload" loop id="fpMusicAudio"></audio><div id="fpMusicPlay"><div id="fpMusicPlayBtn"></div></div></div><!--//背景音乐结束-->qietu(.com)切图秀
评论