.net MVC框架下利用css+js实现遮罩效果

来源：互联网发布：linux 修改文件时间戳编辑：程序博客网时间：2024/05/27 16:42

前一篇文章中http://blog.csdn.net/luanzheng_365/article/details/70455933,实现的loading效果的显示上进行优化,形成一个遮罩,将loading显示在遮罩上,并调整遮罩属性,使得遮罩与页面滚动可以适配.

运行结果页面如下:
这里写图片描述

代码修改如下:
1. CSS,将loadingEffect的position设置为absolute, z-index=1001. 并添加mask标签,mask用来实现遮罩.

.loadEffect {    /*width: 100px;    height: 100px;*/    position: absolute;    margin: 0 auto;    margin-top: 100px;    z-index: 1001;    display: none;}    .loadEffect span {        display: inline-block;        width: 16px;        height: 16px;        border-radius: 50%;        background: lightgreen;        position: absolute;        -webkit-animation: load 1.04s ease infinite;    }@-webkit-keyframes load {    0% {        opacity: 1;    }    100% {        opacity: 0.2;    }}.loadEffect span:nth-child(1) {    left: 22px;    top: 0px;    margin-top: -8px;    -webkit-animation-delay: 0.13s;}.loadEffect span:nth-child(2) {    left: 14px;    top: 14px;    -webkit-animation-delay: 0.26s;}.loadEffect span:nth-child(3) {    left: 0px;    top: 22px;    margin-left: -8px;    -webkit-animation-delay: 0.39s;}.loadEffect span:nth-child(4) {    top: 14px;    right: 14px;    -webkit-animation-delay: 0.52s;}.loadEffect span:nth-child(5) {    right: 22px;    top: 0px;    margin-top: -8px;    -webkit-animation-delay: 0.65s;}.loadEffect span:nth-child(6) {    right: 14px;    bottom: 14px;    -webkit-animation-delay: 0.78s;}.loadEffect span:nth-child(7) {    bottom: 22px;    left: 0px;    margin-left: -8px;    -webkit-animation-delay: 0.91s;}.loadEffect span:nth-child(8) {    bottom: 14px;    left: 14px;    -webkit-animation-delay: 1.04s;}.mask {    width:100%;    height:100%;    background-color:#808080;    position:absolute;    top:0;    left:0;    z-index:1000;    opacity:0.3;    /*兼容IE8及以下版本浏览器*/    filter: alpha(opacity=30);    display:none;}

添加mask.js文件. 增加如下两个方法,显示遮罩和隐藏遮罩. 之后在上一篇文章中的js方法getUserInfo()中,在拿到数据之后,调用hideMask.

function showMask() {    var i = document.getElementById("maskeffect");    i.style.display = "block";    i.style.position = "fixed";}function hideMask() {    var i = document.getElementById("maskeffect");    i.style.display = "none";}

3.html 在HTML中,调用获取数据之前,先调用显示遮罩层showMask().

@{    ViewBag.Title = "Home Page";}<div class="jumbotron">    <h1>ASP.NET</h1>    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p></div><div class="row">    <div class="col-md-4">        <h2>Getting started</h2>        <p>            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that            enables a clean separation of concerns and gives you full control over markup            for enjoyable, agile development.        </p>        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>    </div>    <div class="col-md-4">        <h2>Get more libraries</h2>        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>    </div>    <div class="col-md-4">        <h2>Web Hosting</h2>        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>    </div></div><input id="ID" type="text" size="15" /><input id="NAME" type="text" size="15" /><input id="MOBILE" type="text" size="15" /><link rel="stylesheet" type="text/css" href="~/Content/css/loading.css"><div class="loadEffect" id="loading">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></div><script type="text/javascript" src="~/Content/js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="~/Content/js/getUserInfo.js"></script><script type="text/javascript" src="~/Content/js/mask.js"></script><div class="mask" id="maskeffect"></div><script>    showMask();    getUserInfo();</script>

0 0