JS realisiert den Effekt des Bildwasserfallflusses
|
In diesem Artikel wird der spezifische JS-Code zur Realisierung des Bildwasserfallflusses zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Verfahren: 1. Erstellen Sie ein Bigblock-Modul, um alle Bilder zu speichern.
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<title>Foto Wasserfall</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Körper{
/* Hintergrund: #ebebeb;*/
Hintergrund: URL (./img/bging2.jpg);
Hintergrundgröße: 100 %;
Höhe: 100 %;
}
.großer Block {
Position: relativ;
Breite: 650px;
Mindesthöhe: 200px;
Hintergrund: #fff;
Rand: automatisch;
}
.smallblock{
Position: absolut;
Breite: 100px;
Rahmenradius: 5px;
Kastenschatten: 0 0 7px #89c8eb;
Box-Größe: Rahmenbox;
Überlauf: versteckt;
}
.Foto{
Breite: 100 %;
vertikale Ausrichtung: Mitte;
}
</Stil>
</Kopf>
<Text>
<div Klasse="großer Block">
</div>
<Skript>
var Big = document.getElementsByClassName ("bigblock")[0];
var ele=[];
Variable Nummer = 6;
var bghight=0;
var start=0;
var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
für(var i=0;i<50;i++){
Liste();
}
Funktionsliste(n){
var small = document.createElement("div");
var Bild = Dokument.createElement("img");
klein.Klassenname="kleinerBlock";
image.className="Foto";
image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
ele.push(klein);
Groß.anhängenKind(klein);
small.appendChild (Bild);
}
Funktion set_position(){
für(var i=Start;i<ele.length;i++){
//Position jedes Bildes festlegen var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop;
ele[i].style.top=settop+"px";
var setleft = i %num * ele[i].offsetWidth + (i %num) * 10;
ele[i].style.left=setleft+"px";
//Hintergrundhöhe abrufen bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
Big.style.height = Breite + "px";
}
}
fenster.onload = funktion(){
set_position();
//Füge das Scrollleisten-Ereignis des Browsers hinzu this.addEventListener ("scroll", function() {
var b_height=Dokument.Body.ClientHeight;
wenn(parseInt (this.pageYOffset + this.innerHeight ) > b_height - 10 ){
Start = Elementlänge;
für(i=0;i<30;i++){
Liste();
}
setze_position();
}
// console.log(b_height); //Die sichtbare Höhe des Textkörpers, variabel // console.log(this.pageYOffset); //Der obere Versatz der Bildlaufleiste // console.log(this.innerHeight); //Die Höhe des sichtbaren Bereichs des Browsers})
}
</Skript>
</body>
</html>
Bei dem Bild handelt es sich nicht um ein dynamisches Bild, daher ist kein Effekt erkennbar, der Code ist aber korrekt, Sie können es ja mal versuchen. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL
>>: js zur Realisierung der Web-Message-Board-Funktion
Artikel empfehlen
Interner Ereignisrückruf der Webkomponentenkomponente und Problempunktanalyse
Inhaltsverzeichnis Vorne geschrieben Was genau is...
Einige etwas komplexere Verwendungsbeispielcodes in MySQL
Vorwort Ich glaube, dass die Syntax von MySQL nic...
Detaillierte Erklärung der Lösung für das Problem der zu kleinen Ubuntu-Systemschnittstelle in vmware14Pro
1. Betriebsumgebung vmware14pro Ubuntu 16.04LTS 2...
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:...
Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?
Das Vergessen des Passworts ist ein Ärgernis. Was...
Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3
Bisher kannten wir mehrere Hintergrundattribute i...
Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung
Vor Kurzem musste ich das Projekt für die Mitglie...
Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS
Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...
Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten
Inhaltsverzeichnis 1. Die übergeordnete Komponent...
Verwendung des Linux-Befehls bzip2
1. Befehlseinführung bzip2 wird zum Komprimieren ...
Führen Sie die Schritte zur Verwendung des Elements in vue3.0 aus
Vorwort: Verwenden Sie das Element-Framework in v...
Detaillierte Erklärung des Fischschwarm-Algorithmus im CocosCreator-Spiel
Vorwort Ich wollte vor kurzem CocosCreator lernen...
Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests
Mac wird mit Apache-Umgebung geliefert Öffnen Sie...
Besprechen Sie die Anwendung von Mixin in Vue
Mixins bieten eine sehr flexible Möglichkeit, wie...