jQuery-Hintergrund-Plug-in Backstretch-Nutzungsanleitung_jquery

1. Backstretch-Plug-in-Funktion

Optimieren Sie das Erscheinungsbild der Website. Es wird hauptsächlich zum Festlegen des Hintergrundbilds der Seite verwendet und kann auch das Hintergrundbild des HTML-Elements festlegen. Innerhalb eines Intervalls können mehrere Hintergrundbilder eingestellt und zyklisch angezeigt werden.

Hinweis

Aber wenn das Hintergrundbild beim Festlegen zu groß ist und die von der Website verwendeten Ressourcen begrenzt sind, sollte die Größe des Bildes komprimiert werden. Andernfalls wird das Laden des Bildes sehr langsam sein. Ich habe die Demo der offiziellen Website getestet. Die Bilder sind relativ groß und einige Bilder sind mehr als 400 KB groß. Wenn die Website im virtuellen Raum geöffnet wird, ist das Laden der Bilder etwas langsam.

Der Screenshot-Effekt der Plug-in-Demo ist nicht offensichtlich, daher werde ich ihn nicht in diesem Artikel veröffentlichen. Sie können ihn sich in der offiziellen Demo ansehen, oder unter diesem Artikel finden Sie auch Anwendungsfälle, die ich getestet habe Dieses Plug-in können Sie sich die chinesische Demo ansehen.

Die in den Testfällen verwendeten Bilder stammen aus dem Internet und haben eine Größe von mehr als 100 KB. Verwenden Sie ein offizielles Bild. Da es sich lediglich um ein Test-Plugin handelt, werden die Bilder nicht komprimiert.

2.Offizielle Adresse von Backstretch

Detaillierte Anweisungen zur Verwendung des Plug-Ins finden Sie unter der offiziellen Adresse: https://github.com/srobbin/jquery-backstretch

3. So verwenden Sie die Rückenstreckung

1. Referenzdateien
52e62332c39d4ec6db9dd445d9b9aea82cacc6d41bbb37262a98f745aa00fbf0
9c2bf07c01e954ef586369d1fe9461502cacc6d41bbb37262a98f745aa00fbf0
2. Zum Testen verwendeter Stil

body { font-family: 微软雅黑; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
   width: 90%;
   margin: 20px auto;
   background-color: #FFF;
   padding: 20px;
 }
h1{
  font-weight:normal;
}
pre, code {
 font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
 font-size: 12px;
 color: #333;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
.other { height: 300px; color: #FFF; }
.other div {
 position: absolute;
 bottom: 0;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,0.7);
}
.other div p { padding: 10px; }

3. js verwendet. Das Plugin ist sehr einfach zu bedienen.

$(function(){
  $(".container").css({ opacity: .8 });  //设置透明度
  $.backstretch(["bg.jpg"]); //背景
  $(".other").backstretch(["b.jpg","a.jpg","coffee.jpg"],{duration:4000}); //元素背景，切换现实
});

Tatsächlich gibt es viele Möglichkeiten, den Hintergrund einer Webseite anzupassen. Mit der Leistungsfähigkeit von jQuery können wir schließlich auch einige Beispiele für von jQuery implementierte Bildwechseleffekte verwenden, um den dynamischen Bildwechsel zu ändern und zu implementieren Es gefällt euch allen!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.