Heim > Artikel > Web-Frontend > Teilen von JavaScript-Beispielen --- Bildspezialeffekte mit dreidimensionalen Effekten_Javascript-Fähigkeiten

Teilen von JavaScript-Beispielen --- Bildspezialeffekte mit dreidimensionalen Effekten_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:45:211156Durchsuche

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:

Code kopieren Der Code lautet wie folgt:

Bildbrowser-Tool-Produktion

< ;/body>

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.

Code kopieren Der Code lautet wie folgt:

body {width: 1340px;height: 500px ;background: url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}
#pic_browser img{ Position: absolut ;Grenze: keine;}

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

Code kopieren Der Code lautet wie folgt:

window.onload = function()
{
jzk.app.initImg();
}

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); */
}

Drei Dateien, der js-Code ist oben auch schwer zu verstehen . Wenn jemand anderes es nicht verstehen kann, können Sie es unten in den Kommentaren besprechen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zur JavaScript-Browserkompatibilität, Ereignisbehandlung, GrundkenntnisseNächster Artikel：Tutorial zur JavaScript-Browserkompatibilität, Ereignisbehandlung, Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen