|
|
@ -3,16 +3,52 @@ |
|
|
<head> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta charset="utf-8" /> |
|
|
<title>组件库</title> |
|
|
<title>组件库</title> |
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="plugins/css/animate.min.css"/> |
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
div.wow{ |
|
|
|
|
|
margin: 10px auto; |
|
|
|
|
|
padding: 150px 0; |
|
|
|
|
|
width: 800px; |
|
|
|
|
|
color: #FFF; |
|
|
|
|
|
font-size: 40px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
</head> |
|
|
<body style="height: 1800px;"> |
|
|
<body style="padding-top: 1000px;"> |
|
|
<!-- 生产环境--start --> |
|
|
<!-- 生产环境--start --><div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div> |
|
|
|
|
|
<div class="wow animate__backInRight" style="background:#A70">animate__backInRight</div> |
|
|
|
|
|
<div class="wow animate__bounceInLeft" style="background:#950">animate__bounceInLeft</div> |
|
|
|
|
|
<div class="wow animate__bounceInRight" style="background:#C9C">animate__bounceInRight</div> |
|
|
|
|
|
<div class="wow animate__fadeInUp" style="background:#C80">animate__fadeInUp</div> |
|
|
|
|
|
<div class="wow animate__fadeInDown" style="background:#A28">animate__fadeInDown</div> |
|
|
|
|
|
<div class="wow animate__fadeInLeft" style="background:#292">animate__fadeInLeft</div> |
|
|
|
|
|
<div class="wow animate__fadeInRight" style="background:#A00">animate__fadeInRight</div> |
|
|
|
|
|
<div class="wow animate__fadeInTopLeft" style="background:#369">animate__fadeInTopLeft</div> |
|
|
|
|
|
<div class="wow animate__fadeInTopRight" style="background:#9A0">animate__fadeInTopRight</div> |
|
|
|
|
|
<div class="wow animate__zoomIn" style="background:#029">animate__zoomIn</div> |
|
|
|
|
|
<div class="wow animate__slideInLeft" style="background:#4AF">animate__slideInLeft</div> |
|
|
|
|
|
<div class="wow animate__slideInRight" style="background:#26A">animate__slideInRight</div> |
|
|
|
|
|
<script src="plugins/js/wow.min.js" type="text/javascript" charset="utf-8"></script> |
|
|
<script src="plugins/js/conponents.js"></script> |
|
|
<script src="plugins/js/conponents.js"></script> |
|
|
<script type="text/javascript"> |
|
|
<script type="text/javascript"> |
|
|
var fixed = new Fixed(); |
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
* 页面滚动动画 |
|
|
|
|
|
* class="wow animate__zoomIn" => wow必须，animate__zoomIn动画名称，可参考animate.css(https://animate.style/) |
|
|
|
|
|
* |
|
|
|
|
|
**/ |
|
|
|
|
|
new WOW({ |
|
|
|
|
|
animateClass: 'animate__animated' |
|
|
|
|
|
}).init(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* 悬浮组件 |
|
|
* fixedStyle: 组件类型；可选值 'circle' |
|
|
* fixedStyle: 组件类型；可选值 'circle' |
|
|
* dataValue: 组件内容 |
|
|
* dataValue: 组件内容 |
|
|
**/ |
|
|
**/ |
|
|
|
|
|
var fixed = new Fixed(); |
|
|
fixed.init({ |
|
|
fixed.init({ |
|
|
fixedStyle: '', |
|
|
fixedStyle: '', |
|
|
dataValue: { |
|
|
dataValue: { |
|
|
|
代震
4 years ago