Comentário: Um efeito de fluxo em cascata da página da web pode obter um carregamento ilimitado de imagens. Escrito hoje com base na popular tecnologia HTML5, além de realizar o fluxo em cascata, também são adicionados efeitos de modificação de imagem CSS5, como as fronteiras de canto arredondadas da imagem, o efeito tridimensional da sombra da imagem, etc.
Outro efeito de fluxo em cascata da página da web pode obter um carregamento ilimitado de imagens. Escrito com base na popular tecnologia HTML5 hoje em dia, um total de 7 imagens são chamadas na página de demonstração. Para a conveniência da demonstração, é exibida automaticamente como as barras de rolagem rolam, para que todos possam ver o efeito do fluxo de cascata mais claramente. Além de realizar o fluxo de cascata, também são adicionados efeitos de modificação de imagem do CSS5, como as fronteiras de canto arredondadas da imagem, o efeito tridimensional da imagem etc., que é um bom material para aprender o fluxo de cascata.<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> jQuery Unlimited Loading Waterfall Flow </title>
<style type = "text/css">
/* Redefinição de tag*/
corpo {preenchimento: 0; margem: 0; fundo: #ddd url (/jscss/demoimg/201312/bg55.jpg) repetir;}
img {borda: nenhum;}
a {decoração de texto: nenhuma; cor:#444;}
A: Hover {Color:#999;}
#title {width: 600px; margem: 20px Auto; Text-Align: Center;}
/* Defina o quadro -chave*/
@-webkit-keyframes Shade {
De {Opacity: 1;}
15%{Opacity: 0.4;}
para {Opacity: 1;}
}
@-Moz-Keyframes Shade {
De {Opacity: 1;}
15%{Opacity: 0.4;}
para {Opacity: 1;}
}
@-ms-Keyframes Shade {
De {Opacity: 1;}
15%{Opacity: 0.4;}
para {Opacity: 1;}
}
@-o-keyframes Shade {
De {Opacity: 1;}
15%{Opacity: 0.4;}
para {Opacity: 1;}
}
@KeyFrames Shade {
De {Opacity: 1;}
15%{Opacity: 0.4;}
para {Opacity: 1;}
}
/* enrolar */
#wrap {width: Auto; altura: Auto; margem: 0 Auto; posição: relativa;}
#Wrap .Box {Width: 280px; Hight: Auto; Padding: 10px; Border: Nenhum; Float: Esquerda;}
#wrap .box .info {width: 280px; altura: auto; Radio de borda: 8px; Box-shadow: 0 0 11px #666; Antecedentes: #fff;}
#wrap .box .info .pic {width: 260px; altura: automático; margem: 0 automático; top de preenchimento: 10px;}
#wrap .box .info .pic: hover {
-Webkit-Animação: sombra 3s facilidade 1;
-Moz-Animação: sombra 3s facilidade 1;
-ms-animação: sombra 3s facilidade 1;
-O-Animação: Momba 3s facilidade 1;
Animação: sombra 3s facilidade 1;
}
#wrap .box .info .pic img {width: 260px; Radio de fronteira: 3px;}
#wrap .box .info .title {width: 260px; altura: 40px; margem: 0 auto; altura de linha: 40px; text-align: Center; cor:#666; tamanho da fonte: 18px; fonte de fonte: negro; Overflow: Hidden;}
</style>
<script type = "text/javascript" src = "/ajaxjs/jQuery-1.6.2.min.js"> </script>
<script type = "text/javascript">
window.onload = function () {
// executa a principal função do fluxo de cascata
Pbl ('wrap', 'caixa');
// dados de simulação
var dados = [{'src': '1.jpg', 'title': 'imagem title'}, {'src': '2.jpg', 'title': 'imagem title'}, {'src': '3.jpg', 'title': 'imagem title:' {'src': '4.jp', 'título': 'image title:' {'src': '4.jp', 'título': 'imagem'}, '{' src ':' 4.jp ',' title título '}, {' src ':' 5.jpg ',' title ':' imagem title '}, {' src ':' 6.jpg ',' title ':' imagem title '}, {' src ':' 7.jpg ',' title ':' imagem title '}];
// Defina a carga de rolagem
window.onscroll = function () {
// Calcule a solicitação de dados
if (getcheck ()) {
var wrap = document.getElementById ('wrap');
para (i em dados) {
// Crie uma caixa
var box = document.createElement ('div');
box.className = 'Box';
wrap.appendChild (caixa);
// Crie informações
var info = document.createElement ('div');
info.className = 'info';
box.appendChild (info);
// Crie foto
var pic = document.createElement ('div');
pic.className = 'pic';
info.appendChild (pic);
// Crie img
var iMg = document.createElement ('img');
img.src = '/jscss/demoimg/201312/'+datapon ].src;
img.style.Height = 'Auto';
pic.appendChild (IMG);
// Crie título
var
});
$ (caixa) .Stop (). Animate ({
"Opacity": "1"
}, 999);
getstartnum = index; // Atualize o número de dados solicitados
}
</script>
</head>
<Body>
<Section>
<H2> Aprendizagem de efeitos de fluxo em cascata </h2> por sorriso.
</seção>
<div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/1.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/2.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/3.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/4.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/5.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/6.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/7.jpg"> </div>
<div> <a href = "#"> título da imagem </a> </div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>