利用動態圖添加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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM