jquery css3页面弹出loading加载代码

来源:https://www.sucaihuo.com/js/2347.html 2017-07-07 22:13浏览(2146) 收藏

多种jquery css3页面弹出loading加载特效,带动画加载的gif效果或普通的图片效果,可以设置提示的标题、描述等,可以控制标题、描述显示或隐藏,当然啦,弹窗的样式也是可以自由调整的,目前已经设置了9种样式,发挥一下想象可以做出更多效果,喜欢的童鞋请收下吧。
jquery css3页面弹出loading加载代码
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的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);
}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2