为页面添加div等待遮罩层

很多时候需要在前台页面提交时加上一个等待图标和遮罩。可以使用下面的例子:


<div id='loading' style='display:none;width:100%;height:120%;text-align:center;padding-top:20%; position: absolute;alpha(opacity=45); opacity:0.45;background-color:#FFFFFF;z-index:1000;'>
<table style='margin:auto;'>
<tr><td><span id='disp'>提交中,请等待...</span></td></tr>
<tr><td><img src='../某路径/img/loading.gif'></td></tr>
</table>
</div>


上面例子中,在页面表层添加一个div,并设置透明度来进行遮罩。
控制该遮罩层可以通过设置style.display属性来控制,如下:


// 遮罩层显示
document.getElementById("loading").style.display="block";

// 遮罩层消失
setTimeout("closeLoading()",2000);
function closeLoading() {
document.getElementById("loading").style.display="none";
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: CSS3遮罩loading是一种常见的网页加载效果,通过使用CSS3的特性来实现。下面是一种简单的实现方式: 首先,在HTML文件中创建一个容器元素,用于包裹loading效果的内容。可以使用一个div元素,设置好宽高和位置。 接着,在CSS文件中给这个容器元素添加样式。可以使用position属性将其定位在页面中心,然后设置背景色和透明度,使其成为一个半透明的遮罩。 然后,在容器元素中添加一个loading效果。可以使用伪类:before或:after来创建一个圆形或旋转的元素。可以使用CSS3的keyframes来设置旋转动画,或者使用transition来实现平滑的过渡效果。 最后,使用JavaScript来监听页面的加载事件,一旦页面的内容加载完毕,就移除这个遮罩层,展示出页面的内容。 总结来说,CSS3遮罩loading是通过使用CSS3的特性来创建一个带有loading效果的遮罩层,用于页面加载时展示loading状态,给用户一个良好的体验。在实现过程中,需要结合HTML、CSS和JavaScript来完成。这种loading效果简单实用,可以根据需求进行灵活的样式和动画设置,提升用户体验。 ### 回答2: CSS3遮罩loading指的是使用CSS3技术实现的一种页面加载动画效果。主要通过遮罩层和旋转动画来展示加载的过程。 首先,我们可以使用一个遮罩层来覆盖整个页面,遮挡住用户的操作,防止用户在加载过程中的干扰。通过设置遮罩层的宽度和高度为100%,使其覆盖整个页面。 接下来,我们可以使用CSS3中的旋转动画来表示加载的过程。通过设置一个旋转的图标(例如一个圆圈或者一个齿轮)在遮罩层的中央,并给这个图标设置一个旋转的动画效果。在CSS3中,我们可以使用关键帧(@keyframes)语法来定义一个旋转动画。通过设置动画的起始状态和结束状态、旋转的角度以及动画的持续时间和重复次数等属性,就可以实现一个旋转的加载动画效果。 最后,加载完成后,可以通过JavaScript或者其他交互方式将遮罩层和加载动画移除,显示真正的页面内容。 总的来说,CSS3遮罩loading通过遮罩层和旋转动画来展示加载过程,使用户在等待加载完成时有了一个视觉的反馈,提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值