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 de votre page Web, afin que le plug-in puisse être utilisé ultérieurement. Faites attention au chemin dans le code. un chemin relatif ou un chemin absolu, cela dépend de vos besoins réels.

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

Options de configuration	Valeur par défaut	Description des options
imageContainer	bgstretcher	bgStretcher construira automatiquement la structure de la liste des images dans une arborescence DOM. Ce paramètre est l'ID du détenteur des images. Essayez d'inspecter l'arborescence avec un FireBug. 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	'en haut à gauche'	Ancrage des images par rapport à la fenêtre
preloadImg	faux	Pour les images de préchargement, utilisez true
stratElementIndex	0	Index de l'élément de départ
fonction de rappel	nul	Nom de la fonction de rappel

外掛程式方法：

方法名稱 方法說明
$(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

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