Commentaire: Un effet de flux de cascade de page Web peut réaliser un chargement illimité d'images. Écrits sur la base de la technologie HTML5 populaire aujourd'hui, en plus de réaliser l'écoulement de la cascade, des effets de modification d'image CSS5 sont également ajoutés, tels que les bordures du coin arrondi de l'image, l'effet tridimensionnel de l'ombre de l'image, etc.
Un autre effet de flux de cascade de page Web peut réaliser un chargement illimité d'images. Écrit de nos jours sur la technologie HTML5 populaire, un total de 7 images sont appelées dans la page de démonstration. Pour la commodité de la démonstration, il est automatiquement affiché comme le défilement des barres de défilement, afin que tout le monde puisse voir plus clairement l'effet de la cascade. En plus de réaliser l'écoulement de la cascade, les effets de modification de l'image de CSS5 sont également ajoutés, tels que les bordures du coin arrondi de l'image, l'effet tridimensionnel de l'image, etc., qui est un bon matériau pour apprendre le débit de la cascade.<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> jQuery Unlimited Charging Waterfall Flow </Title>
<style type = "text / css">
/ * TAG REDEFINITION * /
corps {rembourrage: 0; marge: 0; arrière-plan: #ddd url (/jscss/demoimg/201312/bg55.jpg) répéter;}
img {border: aucun;}
A {text-decoration: Aucun; Couleur: # 444;}
A: Hover {Color: # 999;}
#Title {largeur: 600px; marge: 20px auto; texte-adign: centre;}
/ * Définir l'image clé * /
@ -webkit-keyframes Shade {
de {opacité: 1;}
15% {opacité: 0,4;}
à {opacité: 1;}
}
@ -moz-keyframes teinte {
de {opacité: 1;}
15% {opacité: 0,4;}
à {opacité: 1;}
}
@ -ms-keyframes Shade {
de {opacité: 1;}
15% {opacité: 0,4;}
à {opacité: 1;}
}
@ -o-keyframes Shade {
de {opacité: 1;}
15% {opacité: 0,4;}
à {opacité: 1;}
}
@KeyFrames Shade {
de {opacité: 1;}
15% {opacité: 0,4;}
à {opacité: 1;}
}
/* envelopper */
#wrap {largeur: auto; hauteur: auto; marge: 0 auto; position: relative;}
#wrap .box {largeur: 280px; hauteur: auto; rembourrage: 10px; bordure: aucun; float: gauche;}
#wrap .box .info {largeur: 280px; hauteur: auto; border-radius: 8px; box-shadow: 0 0 11px # 666; fond: #fff;}
#wrap .box .info .pic {width: 260px; hauteur: auto; marge: 0 auto; padding-top: 10px;}
#wrap .box .info .pic: hover {
-Webkit-animation: ombre 3s facilité-in-out 1;
-moz-animation: ombre 3s facilité-in-out 1;
-ms-animation: la teinte 3s facilité-in-out 1;
-o-animation: ombre 3s facilité-in-out 1;
Animation: Shade 3S Facit-in-Out 1;
}
#wrap .box .info .pic img {width: 260px; border-radius: 3px;}
#wrap .box .info .Title {width: 260px; hauteur: 40px; margin: 0 auto; line-height: 40px; text-align: Center; couleur: # 666; Font-Size: 18px; Font-weight: Bold; Overflow: Hidden;}.
</ style>
<script type = "text / javascript" src = "/ ajaxjs / jquery-1.6.2.min.js"> </ script>
<script type = "text / javascript">
window.onload = function () {
// Exécute la fonction principale du débit de la cascade
Pbl ('wrap', 'box');
// Données de simulation
var data = [{'src': '1.jpg', 'title': 'image title'}, {'src': '2.jpg', 'title': 'image title'}, {'src': '3.jpg', 'title': 'image title '}, {' src ':' 5.jpg ',' title ':' image title '}, {' src ':' 6.jpg ',' title ':' image title '}, {' src ':' 7.jpg ',' title ':' image title '}];
// Définir la charge de défilement
window.onscroll = function () {
// Calculer la demande de données
if (getcheck ()) {
var wrap = document.getElementById ('wrap');
pour (i en données) {
// Créer une boîte
var box = document.CreateElement ('div');
box.classname = 'box';
wrap.APPEndChild (boîte);
// Créer des informations
var info = document.CreateElement ('div');
info.classname = 'info';
Box.ApendChild (info);
// Créer une photo
var pic = document.CreateElement ('div');
pic.classname = 'pic';
info.ApendChild (pic);
// Créer un img
var img = document.CreateElement ('img');
img.src = '/jscsss/demoimg/201312/'+Data[i
img.style.height = 'auto';
pic.ApendChild (IMG);
// Créer un titre
var
});
$ (box) .stop (). animate ({{{{
"Opacité": "1"
}, 999);
getStartNum = index; // Mettez à jour le nombre de données demandées
}
</cript>
</ head>
<body>
<segction>
<h2> Apprentissage des effets du débit de la cascade </h2> par sourire.
</ section>
<div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 1.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 2.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 3.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 4.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 5.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 6.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/ jscss / démoimg / 201312 / 7.jpg"> </div>
<v> <a href = "#"> Titre de l'image </a> </div>
</div>
</div>
</div>
<div>
</div>
</docy>
</html>