Maison > Article > interface Web > Partage d'exemples JavaScript --- effets spéciaux d'image avec compétences effect_javascript en trois dimensions
Cet exemple a été écrit pendant que je l'étudiais. J'espère qu'il pourra aider tout le monde et apprendre ensemble. L'effet est comme indiqué sur l'image :
Le code html est le suivant :
Le code css est le suivant :
Le masque1, 2, 3... voici un div couvrant plusieurs photos. Utilisez l'attribut opacité pour définir la transparence, ce qui peut donner une sensation de flou et rendre l'apparence plus belle.
#img1, .mask3 {largeur : 106px;hauteur : 70px;gauche : 45px;haut : 61px;z-index : 4;}
#img2, .mask2 {largeur : 166px;hauteur : 110px;gauche : 95px;haut:41px;z-index : 5;>
#img3, .mask1 {largeur : 226px;hauteur : 150px;gauche : 175px; haut : 21px ;z-index : 6;}
#img4 {largeur : 290px;hauteur : 192px;gauche : 285px;haut : 0px;z-index : 7;}
#img5, .mask5 {largeur : 226px;hauteur: 150px;droite: 175px;haut: 21px;z-index: 6;}
#img6, .mask6 {largeur: 166px;hauteur: 110px;droite: 95px;haut:41px;z-index : 5;}
#img7, .mask7 {largeur : 106px;hauteur : 70px;droite : 45px;haut : 61px;z-index : 4;}
.next {haut:76px;droite : 0px; >
.mask1, .mask5 {opacité : 0,3 ;>
.mask2 , .mask6 {opacité : 0,5 ;>
.mask3, .mask7 {opacité : 0,7 ;}
var imgArray = new Array();
imgArray[0] = 'images/1.jpg';
imgArray[1] = 'images/2.jpg';
imgArray[2] = 'images/3.jpg';
imgArray[3] = 'images/4.jpg';
imgArray[4] = 'images/5.jpg';
imgArray[5] = ' images/6.jpg';
imgArray[6] = 'images/7.jpg';
var base=0;
var jzk = {}; /*Définir l'espace de noms*/
jzk.tools = {};/*Couche 1*/
jzk.ui = {};/*Deuxième couche de superposition*/
jzk.ui.moveImg = function(offset)
{
base= (base-offset);
pour (var i = base;i< base 7;i )/*définir i comme variable avec indice de tableau*/
{
var img = document.getElementById('img' (i-base 1)); /*Garantit que les variables IMG sont IMG1, IMG2, IMG3 ... jusqu'à ce que les 7 éléments IMG de IMG7*/
if (i & lt; 0)/*array bid i & lt; > g.src = imgArray[ i- imgArray.length];
}
autre
{
img.src = imgArray[i];
}
}
>
jzk.app = {}; /*La troisième couche du calque*/
jzk.app.initImg = function()/*Initialiser l'image d'affichage, c'est-à-dire le processus d'appel de la fonction moveImg : le paramètre est 7, la base est égale à -7, i est égal aux sept valeurs de -7, -6, -5, -4, -3, -2, -1 Les éléments correspondants sont img1. , img2,...img7, donc il y a : img1=imgArray[ -7 7],img2=imgArray[-6 7]....*/
{
jzk.ui.moveImg(7) ;/*Le paramètre initial doit être défini sur : le nombre d'images pouvant être affichées (celui-ci 7) ;/
>