guide d'utilisation du plug-in d'arrière-plan jQuery backstretch_jquery

1. Fonction de plug-in d'étirement arrière

Optimisez l’apparence du site Web. Il est principalement utilisé pour définir l'image d'arrière-plan de la page, et peut également définir l'image d'arrière-plan de l'élément html. Plusieurs images d'arrière-plan peuvent être définies et affichées en cycles dans un intervalle.

Remarque

Mais lors de la définition de l'image d'arrière-plan, si l'image est trop grande et que les ressources utilisées par le site Web sont limitées, la taille de l'image doit être compressée. Sinon, le chargement de l'image sera très lent. J'ai testé la démo du site officiel. Les images sont relativement volumineuses, et certaines images font plus de 400 Ko. Lorsque le site est ouvert dans l'espace virtuel, le chargement des images est un peu lent.

L'effet capture d'écran de la démo du plug-in n'est pas évident, je ne le posterai donc pas dans cet article. Vous pouvez aller sur la démo officielle pour le voir, ou en dessous de cet article, il y a aussi des cas d'utilisation où j'ai testé. ce plug-in. Vous pouvez jeter un oeil à la démo chinoise.

Les images utilisées dans les cas de test proviennent d'Internet et leur taille est supérieure à 100 Ko. Utilisez une image officielle. Puisqu'il s'agit simplement d'un plug-in de test, les images ne sont pas compressées.

2.adresse officielle du backstretch

Il existe des instructions détaillées pour utiliser le plug-in à l'adresse officielle : https://github.com/srobbin/jquery-backstretch

3. Comment utiliser l'étirement du dos

1. Fichiers de référence


2. Style utilisé pour les tests

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 utilisé. Le plugin est très simple à utiliser.

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

En fait, il existe de nombreuses façons de personnaliser l'arrière-plan d'une page Web. Avec la puissance de jQuery, nous pouvons également utiliser quelques exemples d'effets de changement d'image implémentés par jQuery pour modifier et implémenter le changement d'image dynamique. vous l'aimez tous !

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