Heim > Artikel > Web-Frontend > Teilen von JavaScript-Beispielen --- Bildspezialeffekte mit dreidimensionalen Effekten_Javascript-Fähigkeiten
Dieses Beispiel wurde geschrieben, während ich es studierte. Ich hoffe, es kann allen helfen und gemeinsam lernen. Der Effekt ist wie im Bild dargestellt:
Der HTML-Code lautet wie folgt:
Der CSS-Code lautet wie folgt:
Die Maske 1, 2, 3 ... hier ist ein Div, das mehrere Fotos abdeckt. Verwenden Sie das Opazitätsattribut, um die Transparenz zu definieren, die ein verschwommenes Gefühl erzeugen und das Erscheinungsbild schöner machen kann.
.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}
#img3, .mask1 {width: 226px;height: 150px;left: 175px; top: 21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mask5 {width : 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index : 5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}
.next {top:76px;right: 0px; }
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {Hintergrund: #fff;Position: absolut;}
.mask1, .mask5 {Deckkraft: 0,3;}
.mask2 , .mask6 {Deckkraft: 0,5;}
.mask3, .mask7 {Deckkraft: 0,7;}
JS-Code lautet wie folgt:
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 = {}; /*Namespace definieren*/
jzk.tools = {};/*Layer 1*/
jzk.ui = {};/*Zweite Schichtebene*/
jzk.ui.moveImg = function(offset)
{
base= (base-offset);
for (var i = base;i< base 7;i )/*definiere i als Variable mit Array-Index*/
{
var img = document.getElementById('img' (i-base 1)); /*Garantiert, dass IMG-Variablen IMG1, IMG2, IMG3 ... sind, bis die 7 IMG-Elemente von IMG7*/
if (i & lt; 0)/*array bid i & lt; > g.src =imgArray[ i- imgArray.length];
}
else
{
img.src = imgArray[i];
}
}
}
jzk.app = {}; /*Die dritte Ebene der Ebene*/
jzk.app.initImg = function()/*Initialisieren Sie das Anzeigebild, dh den Prozess des Aufrufs der Funktion moveImg: Der Parameter ist 7, die Basis ist gleich -7, i ist gleich den sieben Werten von -7, -6, -5, -4, -3, -2, -1. Die entsprechenden Elemente sind img1 , img2,...img7, also gibt es: img1=imgArray[ -7 7],img2=imgArray[-6 7]....*/
{
jzk.ui.moveImg(7) ;/*Der Anfangsparameter sollte eingestellt sein auf: die Anzahl der Bilder, die angezeigt werden können (diese 7); */
}