|
<html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script src="Scripts/jquery-1.8.2.js"></script> <script type="text/javascript"> //显示加载效果 function ShowLoading() { $("#loading").css("display", "block"); $("#popDiv").css("display", "block"); } //取消加载效果 function CloseLoading() { $("#loading").css("display", "none"); $("#popDiv").css("display", "none"); } </script> <style type="text/css"> #loading { position: fixed; _position: absolute; display: none; top: 50%; left: 50%; width: 124px; height: 124px; overflow: hidden; background: url(Images/pay/loading.gif) no-repeat; z-index: 7; margin: -62px 0 0 -62px; } #popDiv { margin-top:50px; display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 2; -moz-opacity: 0.7; opacity: .1; filter: alpha(opacity=5); } </style> </head> <body> <input type="button" value="显示加载" onclick="ShowLoading();" /> <div id="popDiv"></div> <div id="loading"></div> <input type="button" value="取消加载" onclick="CloseLoading();" /> </body> </html> CSS图片如下：   |
|
|
来自： CoCO-Ebook > 《前端》
