利用动态图添加Loading动画

opacity：CSS3中的属性，调节透明度，一般取值0.5

添加思想:

1.对超链接添加点击事件,通过new {@onclick="showLoading()"}

Html.ActionLink("新建产品",“Create","ProductManage",
                new{productLineID = productLineList[i].ID},
                new{target = "Conframe",@class="create",@onclick="showLoading()"})

2.在<body>中添加div

<div id="loadingover" class="loadingover"></div>
<div id="loadinglayout" class="loadinglayout">
    <img src="loading.jpg" alt="页面正在加载中..." />
</div>

3.编写样式

<style type="text/css">
        .loadingover {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .loadinglayout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>

4.showLoading函数

<script>
    function showLoading(){
        document.getElementById("loadinglayout").style.display = "block";
        document.getElementById("loadingimg").style.display = "block";
}
</script>

5.在ifame子窗口中添加如下javascript代码

<script>
    $(window).load(function(){
        window.parent.hiddenLoading();
})
</script>

6.在父窗口中添加hiddenLoading函数

<script>
    function showLoading(){
        document.getElementById("loadinglayout").style.display = "none";
        document.getElementById("loadingimg").style.display = "none";
}
</script>

posted on 2015-12-17 17:08 Mr.He多多指教阅读(9760) 评论(0) 编辑收藏举报