多种jquery css3页面弹出loading加载特效,带动画加载的gif效果或普通的图片效果,可以设置提示的标题、描述等,可以控制标题、描述显示或隐藏,当然啦,弹窗的样式也是可以自由调整的,目前已经设置了9种样式,发挥一下想象可以做出更多效果,喜欢的童鞋请收下吧。
页面的head部分先要引入必要的两个CSS样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/global.css">
<link type="text/css" rel="stylesheet" href="css/loading.css">
接着设置好页面部分元素的自定义样式,代码如下:
body,html{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.div-btn{
width: 100%;
max-width: 560px;
/*margin:200px auto; */
}
.div-btn div{
margin: 10px 0 ;
}
.test-div{
width: 300px;
height: 300px;
margin:20px auto;
border: 1px solid #aaa;
position: relative;
}
页面的body部分主要用了div作为容器,来放置9个特效样式的按钮,代码如下:
<div class="div-btn">
<div class="dw-btn btn-success" onClick="loading1()">默认效果</div>
<div class="dw-btn btn-warning" onClick="loading8()">纵向文字颜色</div>
<div class="dw-btn btn-primary" onClick="loading2()">纵向效果无title</div>
<div class="dw-btn btn-danger" onClick="loading3()">纵向效果无title描述</div>
<div class="dw-btn btn-warning " onClick="loading4()">其他背景色</div>
<div class="dw-btn btn-success" onClick="loading5()">纵向图片效果</div>
<div class="dw-btn btn-primary" onClick="loading6()">横向图片效果</div>
<div class="dw-btn btn-danger" onClick="loading7()">横向进度效果,字体颜色</div>
<div class="dw-btn btn-warning" onClick="loading10()">无过渡效果</div>
</div>
页面的底部先要引入jQuery库和一个JS文件,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>
接着设置个按钮的弹窗事件的响应方法,部分代码如下:
function loading1() {
$('body').loading({
loadingWidth:240,
title:'快看啊!',
name:'test',
discription:'一大波福利来了...',
direction:'column',
type:'origin',
// originBg:'#71EA71',
originDivWidth:40,
originDivHeight:40,
originWidth:6,
originHeight:6,
smallLoading:false,
loadingMaskBg:'rgba(0,0,0,0.2)'
});
setTimeout(function(){
removeLoading('test');
},3000);
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791