7 Star 20 Fork 6

qietuwang / 切图秀

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
index.html 4.88 KB
Copy Edit Web IDE Raw Blame History
qietuwang authored 2017-06-23 23:39 . Upload index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>切图秀</title>
<link rel="stylesheet" href="css/slicy.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<div class="wrapper">
<img src="imgs/logo.png"/>
<a href="###">v1.0</a>
</div>
</div>
<div class="container">
<div class="down">
<a href="./demo6.23/" target="_blank">查看演示</a>
<a href="./down6.23/down.zip" target="_self">立即下载</a>
</div>
<h2>什么是切图秀?</h2>
<div class="demo">
我们把切图秀定义为基于html5+css3前端切图实现的微场景秀。并且开源切图秀的基础项目,它提供了一个可靠的基础去创建你的项目,你只需要发挥你的创意去组合动画。
</div>
<h2>作品</h2>
<p>切图秀被用在了很多项目中,例如跟我们合作的汉口银行,肌肤管家,以及安以轩结婚请帖。</p>
<p>链接地址:<a href="http://ent.qq.com/a/20170507/017272.htm" target="_blank">http://ent.qq.com/a/20170507/017272.htm</a></p>
<h2>实现原理</h2>
<div class="demo">
切图秀基于jquery.fullpage,并且加以改造,融合了非常强大的css3动画库animate.css,通过非常简单的方式可以实现不同动画的调用。
</div>
<h2>使用方式</h2>
<div class="code">
<p>在head区域加入<br>
</p>
<p>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/animate.css&quot;/&gt;<br>
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/jquery.fullPage.css&quot;/&gt;<br>
</p>
<p>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/qtx.css&quot;/&gt;</p>
<p>&nbsp;</p>
<p>&lt;/body&gt;前面加入</p>
<p>&lt;script src=&quot;js/jquery-1.7.2.js&quot; &gt;&lt;/script&gt;</p>
<p>&lt;script type='text/javascript' src=&quot;js/jquery.fullPage.min.js&quot;&gt;&lt;/script&gt;<br>
&lt;script type='text/javascript' src=&quot;js/qtx.js&quot;&gt;&lt;/script&gt;</p>
</div>
<h2>结构规则</h2>
<div class="code">
<p>&lt;div class=&quot;fpLayout&quot;&gt;</p>
<p>&lt;div class=&quot;section page1&quot;&gt;</p>
<p>xxx</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;section page2&quot;&gt;</p>
<p>xxx</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;section page3&quot;&gt;</p>
<p>xxx</p>
<p>&lt;/div&gt;</p>
<p>&lt;/div&gt;</p>
</div>
<h2>添加动画</h2>
<p>data-fp-animate=&quot;zysBounceIn&quot; (必须要加,动画来源于animate.css动画库)</p>
<p>参考文档 <a href="http://developer.qietu.com/p/CSS3-Animation/tools.html" target="_blank">http://developer.qietu.com/p/CSS3-Animation/tools.html</a></p>
<p>data-fp-delay=&quot;1s&quot; (延迟1秒出现,非必要,不添加为不延迟)</p>
<p>data-fp-duration=&quot;1s&quot; (动画时间1s,非必要,不添加默认为1s)</p>
<p>data-fp-iteration=&quot;10&quot; (动画反复执行10次,非必要,不添加默认为1次,值为“infinite”代表无限循环。)</p>
<div class="code">
&lt;img class=&quot;demo&quot; src=&quot;images/zys_img3.png&quot; data-fp-delay=&quot;0&quot; data-fp-animate=&quot;zysBounceIn&quot; data-fp-duration=&quot;1s&quot;/&gt; </div>
<h2>关于loading</h2>
<p>集成了波浪的进度条显示,它可以真实的反应当前的加载进度,增强用户体验。</p>
<div class="demo">
<img src="imgs/img1.png" width="200"/>
</div>
<div class="code">&lt;div id=&quot;fpLoading&quot;&gt;<br>
&lt;div id='fpWaveWrap'&gt;<br>
&lt;div class='fpWave fpWave1'&gt;&lt;/div&gt;<br>
&lt;div class='fpWave fpWave2'&gt;&lt;/div&gt;<br>
&lt;div class='fpWave fpWave3'&gt;&lt;/div&gt;<br>
&lt;div class='fpLogo'&gt;&lt;img src=&quot;images/qtx2.png&quot;/&gt;&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;div id=&quot;fpLoadingTxt&quot;&gt;<br>
资源加载&lt;span id=&quot;fpLoadingNum&quot;&gt;0&lt;/span&gt;%<br>
&lt;/div&gt;<br>
&lt;/div&gt;</div>
<h2>关于背景音乐</h2>
<p>集成了背景音乐播放功能,可以点击停止,再点击开启。</p>
<div class="demo">
<img src="imgs/img2.png" width="200"/>
</div>
<div class="code">&lt;!--背景音乐--&gt;<br>
&lt;div id=&quot;fpMusic&quot;&gt;<br>
&lt;audio src=&quot;mp3/WithanOrchid.mp3&quot; preload=&quot;preload&quot; loop id=&quot;fpMusicAudio&quot;&gt;&lt;/audio&gt;<br>
&lt;div id=&quot;fpMusicPlay&quot;&gt;<br>
&lt;div id=&quot;fpMusicPlayBtn&quot;&gt;&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;!--//背景音乐结束--&gt;</div>
</div>
<div class="footer">
qietu(.com)切图秀 隶属武汉切图网络技术有限公司 版权所有
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

HTML
1
https://gitee.com/qietuwang/qietuxiu.git
git@gitee.com:qietuwang/qietuxiu.git
qietuwang
qietuxiu
切图秀
master

Search