page-grow
Version:
页面进出场动画管理，零配置，高扩展，是可视化大屏或其他要求炫酷的商业网站必备插件。
113 lines (107 loc) • 3.97 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style>
p, ul, li {margin: 0;padding: 0;list-style: none;}
span{display: inline-block;}
.container{
position:relative;
width: 700px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box{
height: 100px;
background: #ccc;
margin-bottom: 20px;
}
.box1 {width: 200px;}
.box2 {width: 700px;height: 150px;}
.box3 {width: 300px;}
.box4 {width: 300px;height: 300px;}
.box7 {position: absolute;right: -230px;top: 0;width: 200px;height: 340px;}
.text {margin: 0;font-size: 12px;}
.red-bg {margin: 10px;height: 60px;background: #eb9999;}
.wrapper-bg {margin: 10px;height: 120px;background: #999393;}
</style>
</head>
<body>
<div class="container" id="container">
<div class="box box1" id="box1">
测试文字测试文字测试文字
<span>2500个</span>
<p class="text"> ANO</p>
</div>
<div class="box box1" id="box2"><p id="num">5,000</p></div>
<div class="box box1" id="box3">
<div class="red-bg"></div>
</div>
<div class="box7" id="box7">
<div>
<p>图例的数据数组。数组项通常为一个字符串</p>
</div>
</div>
<div class="box box2" id="box4">
<div class="wrapper-bg">
<p class="wrapper-title">模块标题测试模块标题测试模块标题测试模块标题测试模块标题测试</p>
<ul>
<li>
<span>1</span>
<span>配置解析规则</span>
</li>
<li>
<span>2</span>
<span>构建解析器</span>
</li>
<li>
<span>3</span>
<span>开始解析</span>
</li>
<li>
<span>4</span>
<span>执行动画</span>
</li>
</ul>
</div>
</div>
<div class="box box3" id="box5">25,000</div>
<div class="box box4" id="box6">
<img src="./img1.jpg"/>
<img src="./img2.jpg"/>
<img src="./img3.jpg"/>
<img src="./img4.jpg"/>
<img src="./img1.jpg"/>
<img src="./img2.jpg"/>
<img src="./img3.jpg"/>
<img src="./img4.jpg"/>
<img src="./img1.jpg"/>
<img src="./img2.jpg"/>
<img src="./img3.jpg"/>
<img src="./img4.jpg"/>
</div>
</div>
<!-- <script type="module" src="../index.esm.js"></script> -->
<script type="module">
import {pageGrow} from '../index.esm.js';
window.pageGrow1 = pageGrow
// let option = {
// target: document.getElementById('container'),
// type: 2,
// parseLayer: 5,
// config: {
// interval: 0.1,
// parseLayer: 2,
// stringType: 'sys_stringWave'
// }
// }
// pageGrow.init(option)
// //退场
// pageGrow.leave(reverseCallback)
// function reverseCallback(){
// console.log('reversed!!!')
// }
</script>
</body>
</html>