You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
3.1 KiB
78 lines
3.1 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<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>
|
|
<body style="padding-top: 1000px;">
|
|
<!-- 生产环境--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 type="text/javascript">
|
|
/**
|
|
* 页面滚动动画
|
|
* class="wow animate__zoomIn" => wow必须，animate__zoomIn动画名称，可参考animate.css(https://animate.style/)
|
|
*
|
|
**/
|
|
new WOW({
|
|
animateClass: 'animate__animated'
|
|
}).init();
|
|
|
|
|
|
|
|
/**
|
|
* 悬浮组件
|
|
* fixedStyle: 组件类型；可选值 'circle'
|
|
* dataValue: 组件内容
|
|
**/
|
|
var fixed = new Fixed();
|
|
fixed.init({
|
|
fixedStyle: '',
|
|
dataValue: {
|
|
phone: '0551-6668388',
|
|
vxQrcode: 'plugins/img/icon-vx_1.1.png'
|
|
}
|
|
});
|
|
</script>
|
|
<!-- 生产环境--end -->
|
|
|
|
|
|
<!-- 演示内容--start -->
|
|
<input onclick="newFixed()" style="position: fixed;top:20px;background-color: #3AF;color:#FFF" type="button" value="默认" />
|
|
<input onclick="newFixed('circle')" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" />
|
|
<script type="text/javascript">
|
|
function newFixed(style) {
|
|
fixed = null
|
|
document.getElementsByClassName('conponent_fixed')[0].remove();
|
|
fixed = new Fixed();
|
|
fixed.init({
|
|
fixedStyle: style ? style : 'default'
|
|
});
|
|
}
|
|
</script>
|
|
<!-- 演示内容--end -->
|
|
</body>
|
|
</html>
|
|
|