Das jQuery-Plug-in bgStretcher.js implementiert Vollbild-Hintergrundeffekte_jquery

bgStretcher 2011 (Background Stretcher) ist ein jQuery-Plug-in, das mehrere Hintergrundbilder zu Ihrer Webseite hinzufügen und mehrere Hintergrundbilder automatisch umschalten kann. Gleichzeitig kann die Größe des Hintergrundbilds angepasst werden Größe des Browserfensters. Zu den Wechseleffekten des Hintergrundbilds gehören Ein- und Ausblenden, Scrollen und Diashow. Wenn Scrollen und Diashow ausgewählt sind, können Sie die Richtung wählen: oben, unten, links oder rechts oder oben links, rechts unten, rechts oben , links unten. Die Bildwechselreihenfolge kann auch auf vorwärts, rückwärts oder zufällig eingestellt werden. Weitere Optionen liegen bei Ihnen, um langsam zu recherchieren.

bgStretcher ist ein jQuery-Plug-in, mit dem Sie ein großes Bild (oder eine Gruppe von Bildern) zum Hintergrund Ihrer Webseite hinzufügen und die Größe des Bildes proportional ändern können, um den gesamten Fensterbereich auszufüllen. Dieses Plugin fungiert als Diashow, wenn mehrere Bildmodi verwendet werden (Geschwindigkeit und Dauer der Diashow sind konfigurierbar).

Plug-in-Funktionen:

Die Skriptdatei ist einfach und leicht einzurichten; unterstützt alle neuen Browser; unterstützt einzelne oder mehrere Bilder.

Plugin-Nutzung:

Zunächst müssen Sie natürlich das Plug-in herunterladen. Das Plug-in-Paket enthält bereits die erforderlichen JS-Dateien.

Fügen Sie dann den folgenden Code zwischen

ein, damit das Plug-in später verwendet werden kann ein relativer Pfad oder ein absoluter Pfad, es hängt von Ihren tatsächlichen Anforderungen ab.

<link rel="stylesheet" type="text/css" href="./main.css" />
<link rel="stylesheet" type="text/css" href="../bgstretcher.css" />
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>

Fügen Sie dann den folgenden Code nach dem obigen Code ein, um das bgStrecher-Plug-in zu initialisieren. Sie müssen angeben, auf welchem ​​Element das Plug-in funktioniert, und die Plug-in-Optionen konfigurieren. Achten Sie auch darauf, keine Fehler mit den Bildpfaden im Code zu machen.

<script type="text/javascript">
 $(document).ready(function(){
 
  // Initialize Backgound Stretcher 
 $('.demoo').bgStretcher({
 images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
 imageWidth: 800, 
 imageHeight: 400, 
 slideDirection: 'N',
 slideShowSpeed: 1000,
 transitionEffect: 'fade',
 sequenceMode: 'normal',
 });
 
 });
</script>

Dieses Plug-in wird nicht nur für den Hintergrund der gesamten Webseite verwendet, sondern kann auch für ein bestimmtes Webseitenelement verwendet werden. Natürlich kann zumindest dieses Element den Hintergrund festlegen, z. B. DIV usw . Das Webseitenelement wird über ID oder Klasse ausgewählt. Der Elementname BODY sollte der einzige Elementname auf der Webseite sein, was bedeutet, dass der Hintergrund für die gesamte Webseite festgelegt wird. Wenn Sie den Hintergrund für einen bestimmten DIV-Block auf der Seite festlegen, müssen Sie eine ID für den DIV definieren oder seinen Stilklassennamen kennen. Die ID und der Klassenname sollten eindeutig sein, sonst ist der Effekt erstaunlich.

Plug-in-Optionen:

Konfigurationsoptionen	Standardwert	Optionsbeschreibung
imageContainer	bgstretcher	bgStretcher erstellt automatisch eine Struktur für die Bilderliste in einem DOM-Baum. Dieser Parameter ist die ID für den Bildhalter. Versuchen Sie, den Baum mit einem FireBug zu untersuchen to get an idea how it's constructed.
resizeProportionally	true	Indicates if background image(s) will be resized proportionally or not.
resizeAnimate	false	Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images	empty	An array containing list of images to be displayed on page's background.
imageWidth	1024	Original image's width.
imageHeight	768	Original image's height.
maxWidth	auto	Maximum image's width.
maxHeight	auto	Maximum image's height.
nextSlideDelay	3000 (3 seconds)	Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed	normal	Numeric value in milliseconds or jQuery string value (‘fast', ‘normal', ‘slow'). The parameter sets the speed of transition between images.
slideShow	true	Allows or disallows slideshow functionality.
transitionEffect	fade	Transition effect (use also: none, simpleSlide, superSlide).
slideDirection	N	Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	normal	Sequence mode (use also: back, random)
buttonPrev	empty	Previous button CSS selector
buttonNext	empty	Next button CSS selector
pagination	empty	CSS selector for pagination
anchoring	‘left top'	Anchoring bgStrtcher area regarding window
anchoringImg	‘links oben‘	Bilder am Fenster verankern
preloadImg	falsch	Für Preload-Bilder verwenden Sie true
stratElementIndex	0	Startelementindex
Rückruffunktion	null	Name der Rückruffunktion

Méthode de plug-in :

Nom de la méthode Description de la méthode
$(objID).bgStretcher.play()                                                                                     $ (objid) .bgStretcher.pause () $(objID).bgStretcher.sliderDestroy() Détruire le diaporama en arrière-plan

Compatibilité navigateur :

MS Internet Explorer 6, 7, 8, 9

Mozilla Firefox 2, 3, 4

Opéra 9
Apple Safari
Google Chrome

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.