Comentario: Un efecto de flujo de cascada de la página web puede lograr una carga ilimitada de imágenes. Escrito basado en la popular tecnología HTML5 hoy en día, además de realizar el flujo de cascada, también se agregan efectos de modificación de la imagen CSS5, como los bordes de esquina redondeados de la imagen, el efecto tridimensional de la sombra de la imagen, etc.
Otro efecto de flujo de cascada de la página web puede lograr una carga ilimitada de imágenes. Escrito basado en la popular tecnología HTML5 hoy en día, se llama un total de 7 imágenes en la página de demostración. Para la comodidad de la demostración, se muestra automáticamente a medida que las barras de desplazamiento se desplazan, para que todos puedan ver el efecto del flujo de cascada más claramente. Además de realizar el flujo de cascada, también se agregan los efectos de modificación de la imagen de CSS5, como los bordes de esquina redondeados de la imagen, el efecto tridimensional de la imagen, etc., que es un buen material para aprender el flujo de cascada.<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> jQuery Unlimited Loading Waterfall Flow </title>
<style type = "text/css">
/* Redefinición de etiqueta*/
cuerpo {Padding: 0; margen: 0; fondo: #ddd url (/jscss/demoimg/201312/bg55.jpg) repetir;}
img {border: none;}
A {Text-Decoration: None; Color:#444;}
A: Hover {Color:#999;}
#title {ancho: 600px; margen: 20px Auto; Text-Align: Center;}
/* Definir el cuadro de teclas*/
@-webkit-keyframes sombra {
De {opacidad: 1;}
15%{opacidad: 0.4;}
a {opacidad: 1;}
}
@-Moz-Keyframes Shade {
De {opacidad: 1;}
15%{opacidad: 0.4;}
a {opacidad: 1;}
}
@-ms-keyframes sombra {
De {opacidad: 1;}
15%{opacidad: 0.4;}
a {opacidad: 1;}
}
@-o-keyframes sombra {
De {opacidad: 1;}
15%{opacidad: 0.4;}
a {opacidad: 1;}
}
@Keyframes Shade {
De {opacidad: 1;}
15%{opacidad: 0.4;}
a {opacidad: 1;}
}
/* envoltura */
#Wrap {ancho: auto; altura: auto; margen: 0 auto; posición: relativo;}
#WRAP .BOX {ancho: 280px; altura: auto; relleno: 10px; border: none; float: izquierda;}
#Wrap .Box .info {Ancho: 280px; Height: Auto; Border-Radius: 8px; box-shadow: 0 0 11px #666; fondo: #fff;}
#Wrap .Box .info .pic {ancho: 260px; altura: auto; margen: 0 auto; padding-top: 10px;}
#Wrap .Box .info .pic: hover {
-WebKit-Animation: Sombra 3S Facilia-Out 1;
-Moz-Animation: Sombra 3s Facilia-Out 1;
-Ms-Animation: Sombra 3S Facilia-Out 1;
-o-animation: sombra 3s facilitan 1;
Animación: Shade 3s Facil-In-Out 1;
}
#Wrap .Box .info .pic img {ancho: 260px; border-radio: 3px;}
#Wrap .Box .info .title {ancho: 260px; altura: 40px; margen: 0 auto; line-height: 40px; text-aline
</style>
<script type = "text/javaScript" src = "/ajaxjs/jQuery-1.6.2.min.js"> </script>
<script type = "text/javaScript">
window.onload = function () {
// Ejecutar la función principal del flujo de cascada
Pbl ('envoltura', 'caja');
// datos de simulación
var data = [{'src': '1.jpg', 'título': 'Título de imagen'}, {'src': '2.jpg', 'título': 'Título de imagen'}, {'src': '3.jpg', 'title': 'Image Title'}, {'src': '4.jpg', 'Title': imagen: imagen ': imagen': imagen ' Título '}, {' src ':' 5.jpg ',' título ':' Título de imagen '}, {' src ':' 6.jpg ',' título ':' Título de imagen '}, {' src ':' 7.jpg ',' title ':' Image Title '}];
// establecer la carga de desplazamiento
window.onscroll = function () {
// Calcular la solicitud de datos
if (getCheck ()) {
var wrap = document.getElementById ('wrap');
para (i en datos) {
// crear una caja
var box = document.createElement ('div');
box.classname = 'box';
wrap.appendChild (caja);
// Crear información
Var info = document.createElement ('div');
info.classname = 'info';
box.appendChild (información);
// Crear foto
var pic = document.createElement ('div');
pic.classname = 'pic';
info.appendChild (foto);
// Crear img
var img = document.createElement ('img');
img.src = '/jscss/demoimg/201312/'+data[ifont>.src;
img.style.height = 'Auto';
Pic.appendChild (IMG);
// Crear título
varilla
});
$ (box) .stop (). Animate ({
"Opacidad": "1"
}, 999);
getStartNum = index; // Actualizar el número de datos solicitados
}
</script>
</ablo>
<Body>
<Sección>
<h2> Aprendizaje de efectos de flujo de cascada </h2> por sonrisa.
</section>
<div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/1.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/2.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/3.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/4.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/5.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/6.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
<div>
<div>
<Div> <img src = "/jscss/deloimg/201312/7.jpg"> </div>
<div> <a href = "#"> Título de la imagen </a> </div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>