zoukankan      html  css  js  c++  java
  • 利用动态图添加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>
  • 相关阅读:
    查看网页源代码的方法
    Chrome浏览器清除缓存
    copy与内存管理
    分类(Category)
    @class的使用
    @property参数的
    力扣131题、93题(分割回文串,复原IP地址)
    力扣17题(电话号码的字母组合)
    力扣216(组合总和)
    力扣242题、383题(有效的字母异位词,赎金信)
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5054691.html
Copyright © 2011-2022 走看看