您的位置：首页 > 其它

利用动态图添加Loading动画

2015-12-17 17:08 211 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航