Kommentar: Ein Webseiten -Wasserfall -Fluss -Effekt kann unbegrenztes Laden von Bildern erzielen. Geschrieben, basierend auf der beliebten HTML5-Technologie heute sowie die Verwirklichung des Wasserfallflusses, werden auch CSS5-Bildmodifizierungseffekte hinzugefügt, wie z.
Ein weiterer Webseiten -Wasserfall -Fluss -Effekt kann unbegrenzt das Laden von Bildern erzielen. Auf der Demonstrationsseite werden heutzutage auf der beliebten HTML5 -Technologie geschrieben. Für die Bequemlichkeit der Demonstration wird es automatisch als Scroll -Stabscrollen angezeigt, sodass jeder die Wirkung des Wasserfalls klarer erkennen kann. Zusätzlich zur Verwirklichung des Wasserfallflusses werden auch die Bildmodifizierungseffekte von CSS5 hinzugefügt, wie z.<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<titels> jQuery Unbegrenzt Ladewasserfallfluss </title>
<style type = "text/css">
/* Tag neudefinition*/
Body {Padding: 0; Margin: 0; Hintergrund: #ddd url (/jscss/demoimg/201312/bg55.jpg) Wiederholung;}
IMG {Border: Keine;}
A {Textdekoration: Keine; Farbe:#444;}
A: Hover {Farbe:#999;}
#title {width: 600px; Margin: 20px Auto; Text-Align: Center;}
/* Keyframe definieren*/
@-webkit-keyframes Shade {
Aus {Opazität: 1;}
15%{Opazität: 0,4;}
zu {Opazität: 1;}
}
@-moz-keyframes Shade {
Aus {Opazität: 1;}
15%{Opazität: 0,4;}
zu {Opazität: 1;}
}
@-ms-Keyframes Shade {
Aus {Opazität: 1;}
15%{Opazität: 0,4;}
zu {Opazität: 1;}
}
@-o-keyframes Shade {
Aus {Opazität: 1;}
15%{Opazität: 0,4;}
zu {Opazität: 1;}
}
@keyframes Shade {
Aus {Opazität: 1;}
15%{Opazität: 0,4;}
zu {Opazität: 1;}
}
/* wickeln */
#wrap {width: auto; Höhe: Auto; Margin: 0 Auto; Position: Relativ;}
#wrap .box {width: 280px; Höhe: auto; padding: 10px; border: keine; float: links;}
#wrap .box .info {width: 280px; Höhe: Auto; Border-Radius: 8px; Box-Shadow: 0 0 11px #666; Hintergrund: #fff;}
#wrap .box .info .pic {Breite: 260px; Höhe: Auto; Margin: 0 Auto; Padding-Top: 10px;}
#wrap .box .info .pic: Hover {
-Webkit-Animation: Schatten 3S-Eventual-In-Out 1;
-moz-Animation: Schatten 3s Easy-In-Out 1;
-MS-Animation: Schatten 3s LEART-OUT 1;
-O-Animation: Schatten 3S-Einladung 1;
Animation: Schatten 3S-In-Out 1;
}
#wrap .box .info .pic img {width: 260px; Border-Radius: 3px;}
#wrap .box .info .title {width: 260px; Höhe: 40px; Rand: 0 Auto; Zeilenhöhe: 40px; Text-Align: Mitte; Farbe:#666; Schriftgröße: 18px; Schriftgewicht: Fett; Überlauf: Hidden;}
</style>
<script type = "text/javaScript" src = "/ajaxjs/jQuery-1.6.2.min.js"> </script>
<script type = "text/javaScript">
window.onload = function () {
// Führen Sie die Hauptfunktion des Wasserfallstroms durch
PBL ('Wrap', 'Box');
// Simulationsdaten
var data = [{'src':'1.jpg','title':'Image title'},{'src':'2.jpg','title':'Image title'},{'src':'3.jpg','title':'Image title'},{'src':'4.jpg','title':'Image Titel '}, {' src ':' 5.jpg ',' title ':' bild title '}, {' src ':' 6.jpg ',' title ':' bild title '}, {' src ':' 7.jpg ',' title ':' bild title '};
// Scroll -Laden einstellen
window.onscroll = function () {
// Datenanforderung berechnen
if (getCheck ()) {
var wrack = document.getElementById ('Wrap');
für (i in Daten) {
// Erstellen Sie eine Box
var box = document.createelement ('div');
box.className = 'box';
Wrap.AppendChild (Box);
// Informationen erstellen
var info = document.createelement ('div');
info.className = 'info';
Box.AppendChild (Info);
// Bild erstellen
var pic = document.createelement ('div');
pic.className = 'pic';
info.AppendChild (Bild);
// Img erstellen
var img = document.createelement ('img');
img.src = '/jscss/demoimg/201312/'+Data;
img.style.height = 'auto';
pic.Appendchild (IMG);
// Titel erstellen
var
});
$ (Box) .stop (). Animate ({{
"Deckkraft": "1"
}, 999);
getStartNum = index; // die Anzahl der angeforderten Daten aktualisieren
}
</script>
</head>
<body>
<Abschnitt>
<h2> Lernen von Wasserfallfluss -Effekten </H2> durch Lächeln.
</Abschnitt>
<div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/1.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/2.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/3.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/4.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/5.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/6.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
<div>
<div>
<div> <img src = "/jscss/Demoimg/201312/7.jpg"> </div>
<div> <a href = "#"> Bild -Titel </a> </div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>