Quando navegamos na web, frequentemente vemos o prompt LOADING que aparece quando os dados estão sendo carregados. Na verdade, o princípio desta função é muito simples, ou seja, um DIV cobre a página atual e o Carregamento é exibido na camada DIV coberta. Agora vamos implementá-lo.
1.Página atual:
Copie o código do código da seguinte forma:
<div><a href="#" onclick="showLoading()">Carregando</a></div>
2. Camada de máscara:
Copie o código do código da seguinte forma:
<div id="over"></div>
3. Carregando camada de exibição:
Copie o código do código da seguinte forma:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Código geral:
Copie o código do código da seguinte forma:
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<título></título>
<style type="texto/css">
.atual a {
tamanho da fonte: 20px;
}
.sobre {
exibição: nenhum;
posição: absoluta;
superior: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
cor de fundo: #f5f5f5;
opacidade:0,5;
índice z: 1000;
}
.layout{
exibição: nenhum;
posição: absoluta;
topo: 40%;
esquerda: 40%;
largura: 20%;
altura: 20%;
índice z: 1001;
alinhamento de texto:centro;
}
</estilo>
<script type="texto/javascript">
função showLoading()
{
document.getElementById("over").style.display = "bloco";
document.getElementById("layout").style.display = "bloco";
}
</script>
</head>
<corpo>
<div><a href="#" onclick="showLoading()">Carregando</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</body>
</html>
Efeito final:
Também vi outro método de implementação na Internet, acho que a ideia é boa, que é usar JS para alterar continuamente o valor da tag html para obter o efeito de carregamento de prompts. De acordo com a ideia dele, eu mesmo implementei. o código é o seguinte:
Copie o código do código da seguinte forma:
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<título></título>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="texto/css">
#tb {
largura: 100%;
altura: 100%;
altura da linha: 10px;
}
#tb tr td {
alinhamento de texto: centro;
}
.progressbar {
família de fontes: Arial;
peso da fonte: mais ousado;
cor: cinza;
cor de fundo: branco;
preenchimento: 0px;
estilo de borda: nenhum;
}
.por cento {
família de fontes: Arial;
cor: cinza;
alinhamento de texto: centro;
largura da borda: média;
estilo de borda: nenhum;
}
</estilo>
<script type="texto/javascript">
barra var = 0;
var passo = "||";
/*
*A primeira forma é: $(document).ready(function(){.....});
*/
//$(função(){
//progresso();
//});
/*
*A segunda maneira
*/
//janela.onload=função(){
//progresso();
//}
/*
*A terceira forma simula $(document).ready(function(){.....});
*/
(função () {
var ou seja = !!(window.attachEvent && !window.opera);
var sem = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
var d = documento;
d. pronto = função (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
se (fn.push(f) > 1) retornar;
se (ou seja)
(função () {
tente {d.documentElement.doScroll('esquerda');
catch (erro) { setTimeout(argumentos.callee, 0 });
})();
senão se (semana)
vart = setInterval(função(){
if (/^(carregado|completo)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
documento.ready(função(){
progresso();
});
função progresso() {
barra = barra + 2;
passo = passo + "||";
document.getElementById("porcentagem").valor = barra + "%";
document.getElementById("progressbar").value = passo;
se (barra <= 98) {
setTimeout("progresso()", 100);
}
}
</script>
</head>
<corpo>
<tabela id="tb">
<tr>
<td>
<input type="text" size="50" id="percent" /></td>
</tr>
<tr>
<td>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</tabela>
</body>
</html>
Efeito final: