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.
76 lines
3.2 KiB
76 lines
3.2 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>
|
|
<script src="plugins/js/wow.min.js"></script>
|
|
<script src="plugins/js/conponents.js"></script>
|
|
</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 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({
|
|
themeColor: '#4BE', // 主题色
|
|
fixedStyle: ['circle'], // 样式，形状：'circle' ；风格： ''
|
|
dataValue: {
|
|
feedback: '',
|
|
phone: '0551-6668388',
|
|
vxQrcode: 'plugins/img/icon-vx_1.1.png',
|
|
message: ''
|
|
},
|
|
// 留言提交
|
|
submitFn: function(opt) {
|
|
console.log(opt);
|
|
}
|
|
});
|
|
</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>
|
|
|