Le plug-in jQuery bgStretcher.js implémente les effets d'arrière-plan plein écran_jquery

bgStretcher 2011 (Background Stretcher) est un plug-in jQuery qui peut ajouter plusieurs images d'arrière-plan à votre page Web, et plusieurs images d'arrière-plan peuvent être automatiquement commutées en même temps, la taille de l'image d'arrière-plan peut s'adapter à la situation. taille de la fenêtre du navigateur. Les effets de commutation de l'image d'arrière-plan incluent le fondu entrant et sortant, le défilement et le diaporama. Lorsque le défilement et le diaporama sont sélectionnés, vous pouvez choisir la direction : haut, bas, gauche ou droite, ou haut à gauche, bas à droite, haut à droite. , en bas à gauche. L’ordre de changement d’image peut également être réglé sur avant, arrière ou aléatoire. Plus d’options dépendent de vous pour rechercher lentement.

bgStretcher est un plug-in jQuery qui vous permet d'ajouter une grande image (ou un groupe d'images) à l'arrière-plan de votre page Web et redimensionnera l'image proportionnellement pour remplir toute la zone de la fenêtre. Ce plugin fera office de diaporama si vous utilisez plusieurs modes d'image (la vitesse et la durée du diaporama sont configurables).

Fonctionnalités du plug-in :

Le fichier de script est simple et facile à configurer ; prend en charge tous les nouveaux navigateurs ; prend en charge une ou plusieurs images.

Utilisation du plugin :

Tout d'abord, vous devez bien sûr télécharger le plug-in. Le package du plug-in contient déjà les fichiers JS requis.

Ensuite, insérez le code suivant entre et

<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>

Insérez ensuite le code suivant après le code ci-dessus pour initialiser le plug-in bgStretcher. Vous devez indiquer sur quel élément le plug-in fonctionne et configurer les options du plug-in. De même, veillez à ne pas vous tromper avec les chemins d’images dans le code.

<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>

Ce plug-in n'est pas seulement utilisé pour l'arrière-plan de la page Web entière, mais peut également être utilisé pour un certain élément de page Web. Bien sûr, au moins cet élément peut définir l'arrière-plan, comme DIV, etc. . L'élément de page Web est sélectionné via ID ou Classe. Le nom d'élément BODY doit être le seul nom d'élément dans la page Web, ce qui signifie définir l'arrière-plan de la page Web entière. Si vous définissez l'arrière-plan d'un certain bloc DIV sur la page, vous devez définir un identifiant pour le DIV ou connaître son nom de classe de style. L'ID et le nom de la classe doivent être uniques, sinon l'effet sera incroyable.

Options du plug-in :

外掛程式方法：

方法名稱 方法說明
$(objID).bgStretcher.play()                 Resume background slideshow
$(objID).bgStretcher.pause()              Pause background slideshow
$(objID).bgStretcher.sliderDestroy()   Destroy background slideshow

瀏覽器相容性：

MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9
Apple Safari
Google Chrome

以上所述就是本文的全部內容了，希望大家能夠喜歡。