# 切图秀

**Repository Path**: qietuwang/qietuxiu

## Basic Information

- **Project Name**: 切图秀
- **Description**: 我们把切图秀定义为基于html5+css3前端切图实现的微场景秀。并且开源切图秀的基础项目，它提供了一个可靠的基础去创建你的项目，你只需要发挥你的创意去组合动画。
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://www.qietu.com/qietuxiu/
- **GVP Project**: No

## Statistics

- **Stars**: 21
- **Forks**: 6
- **Created**: 2017-06-23
- **Last Updated**: 2021-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

什么是切图秀？
我们把切图秀定义为基于h5前端切图实现的适合手机微信端浏览的比较炫酷的页面。并且开源切图秀的基础项目，它提供了一个可靠的基础去创建你的h5场景，你只需要发挥你的创意去组合动画。
作品

切图秀被用在了很多项目中，例如跟我们合作的汉口银行，肌肤管家，以及安以轩结婚请帖。

链接地址：http://ent.qq.com/a/20170507/017272.htm
实现原理
切图秀基于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动画库)

参考文档 http://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)切图秀