侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

遮罩层Loading实现

2024-05-07 星期二 / 0 评论 / 0 点赞 / 58 阅读 / 1441 字

先上图: 以下是几个必须的文件: 1.loading.css: #loading {position: fixed;top: 0;left: 0;width: 100%;height: 100%;b

先上图:

以下是几个必须的文件:

1.loading.css:

#loading {	position: fixed;	top: 0;	left: 0;	width: 100%;	height: 100%;	background: rgba(0, 0, 0, 0.7);	z-index: 15000;}#loading img {	position: absolute;	top: 50%;	left: 50%;	width: 80px;	height: 80px;	margin-top: -15px;	margin-left: -15px;}

2.index.html:

<div id="loading">    <img src="images/loading.gif"></div>

3.再来一张动态的GIF图片,OVER!就是这么easy!


打开页面出现画面,如果想关闭,使用

$('#loading').hide();

打开使用:

$('#loading').show();

 

实例:

//点击查询按钮重新显示loadingfunction search() {	$('#loading').show();        $.ajax({					url : "xxx",					type : 'POST',					success : function(data) {						//成功后 隐藏loading框,						$('#loading').hide();                                        //to do something					},}

 


 

广告 广告

评论区