Maison > interface Web > js tutoriel > Utilisez js pour utiliser CSS pour implémenter js afin de modifier les compétences de l'exemple_javascript de l'image d'arrière-plan

Utilisez js pour utiliser CSS pour implémenter js afin de modifier les compétences de l'exemple_javascript de l'image d'arrière-plan

WBOY
Libérer: 2016-05-16 16:56:01
original
1137 Les gens l'ont consulté

1. Utilisez JS pour définir un tableau d'images, qui stocke les images que vous souhaitez afficher de manière aléatoire

Copier le code Le code est le suivant :

ar imgArr=["http:// www.jb51 .net/logo_cn.png",
"http://www.jb51.net/baidu_sylogo1.gif",
"http://www.jb51.net/news/uploadImg/20120111/ 20120111081906_79.jpg ",
"http://www.jb51.net/news/uploadImg/20120111/20120111081906_76.jpg"];

Veuillez remplacer les images ci-dessus par les vôtres.

2. Utilisez JS pour générer un nombre aléatoire Bien sûr, ce nombre aléatoire commence à 0 et se termine à imgArr.length-1

Copier le code Le code est le suivant :

var index =parseInt(Math.random( )*( imgArr.length-1));

De cette façon, nous obtenons l'image actuelle générée aléatoirement

Copier le code Le code est le suivant :

var currentImage=imgArr[index];

3. Puisqu'une image d'arrière-plan est générée de manière aléatoire, utilisez JS pour utiliser cette image comme image d'arrière-plan.

Copier le code Le code est le suivant :

document.getElementById("BackgroundArea"). style.backgroundImage ="url(" currentImage ")";

Comme il s'agit d'une démo, j'ai défini un div avec l'ID BackgroundArea sur la page, et j'ai également défini un arrière-plan aléatoire pour ce div.

Copier le code Le code est le suivant :


Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal