Dieses Beispiel wurde von mir geschrieben, als ich es noch einmal studierte. Ich hoffe, es kann jedem helfen, gemeinsam zu lernen. Der Effekt ist in der Abbildung dargestellt:
Der HTML -Code sieht so aus:
Die Codekopie lautet wie folgt:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: Lang = "en" Lang = "en">
<kopf>
<title> Bildbrowsing -Tool -Erstellung </title>
<script type = "text/javaScript" src = "js/main.js"> </script>
<link rel = "stylesheet" type = "text/css" href = "style/css.css">
</head>
<body>
<div id = "pic_browser">
<img Src = "Bilder/prev.png" onclick = "JavaScript: jzk.ui.moveimg (-1);"/>
<img id = "img1" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (3);"> </div> <!-Maske mit drei Ebenen hinzufügen->
<img id = "img2" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (2);"> </div> <!-Sekundärmaske hinzufügen->
<img id = "img3" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (1);"> </div> <!-Fügen Sie eine Maske-Ebene hinzu->
<img id = "img4" onclick = ""/>
<img id = "img5" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (-1);"> </div> <!-der gleiche Effekt wie Mask1->
<img id = "img6" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (-2);"> </div> <!-der gleiche Effekt wie Mask2->
<img id = "img7" onclick = ""/>
<div onclick = "JavaScript: jzk.ui.moveimg (-3);"> </div> <!-der gleiche Effekt wie Mask3->
<img src = "Bilder/next.png" onclick = "JavaScript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
Der CSS -Code lautet wie folgt:
Die Maske1, 2, 3 ... Hier ist ein Div, das mehrere Fotos abdeckt. Das Opazitätsattribut wird verwendet, um Transparenz zu definieren, das ein Gefühl der Verwirrung erzielen und das Aussehen schöner machen kann.
Die Codekopie lautet wie folgt:
Körper {Breite: 1340px; Höhe: 500px; Hintergrund: URL (../ Bilder/body_bg.gif) no-repeat;}
#pic_browser {width: 860px; Höhe: 192px; Position: Relativ; Margin: 130px 106px;}
#pic_browser img {Position: absolut; Grenze: Keine;}
.prev {top: 76px; links: 0px; }
#img1, .mask3 {width: 106px; Höhe: 70px; links: 45px; ober: 61px; Z-Index: 4;}
#img2, .mask2 {width: 166px; Höhe: 110px; links: 95px; ober: 41px; z-Index: 5;}
#img3, .mask1 {width: 226px; Höhe: 150px; links: 175px; oben: 21px; Z-Index: 6;}
#img4 {width: 290px; Höhe: 192px; links: 285px; top: 0px; Z-Index: 7;}
#img5, .mask5 {width: 226px; Höhe: 150px; rechts: 175px; oben: 21px; Z-Index: 6;}
#img6, .mask6 {width: 166px; Höhe: 110px; rechts: 95px; ober: 41px; Z-Index: 5;}
#img7, .mask7 {width: 106px; Höhe: 70px; rechts: 45px; ober: 61px; Z-Index: 4;}
.Next {top: 76px; rechts: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {Hintergrund: #fff; Position: absolut;}
.mask1, .mask5 {opazität: 0.3;}
.mask2, .mask6 {opazität: 0.5;}
.mask3, .mask7 {opazität: 0.7;}
Der JS -Code lautet wie folgt:
Die Codekopie lautet wie folgt:
window.onload = function ()
{
jzk.app.initimg ();
}
var imgarray = new Array ();
Imgarray [0] = 'Bilder/1.JPG';
Imgarray [1] = 'Images/2.jpg';
Imgarray [2] = 'Images/3.jpg';
Imgarray [3] = 'Bilder/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 = {};/*Schicht erste Schicht*/
jzk.ui = {};/*schichtete zweite Schicht*/
jzk.ui.moveimg = Funktion (Offset)
{
Base = (Basis-Offset);
für (var i = base; i <base +7; i ++)/*definiere i als variable Index für Array*/
{
var img = document.getElementById ('img'+(I-Base+1));/*Stellen Sie sicher, dass die IMG
if (i <0) / *Array -Index I <0, der Offset> 0, * /angibt
{
img.src = imgarray [imgarray.length+i];
}
sonst wenn (i> imgarray.length-1)
{
img.src = imgarray [i-Imgarray.length];
}
anders
{
img.src = imgarray [i];
}
}
}
jzk.app = {}; /*Geschichtete dritte Schicht*///
jzk.app.initimg = function ()/* das Anzeigebild initialisieren, dh auf den Funktion moveImg -Prozess: Der Parameter ist 7, die Basis ist gleich -7, i ist gleich -7, -6, -5, -4, -3, -2, -1 und die entsprechenden Elemente sind img1, img2, img7. img2 = imgarray [-6+7] ...*/
{
jzk.ui.moveimg (7);/*Die ersten Parameter sollten auf: die Anzahl der Bilder festgelegt werden, die angezeigt werden können (7 hier); */
}
Die drei Dateien sind durch JS -Code schwer zu verstehen. Ich habe auch detaillierte Kommentare oben gegeben. Wenn jemand anderes es lesen und nicht verstehen kann, können Sie es in den Kommentaren unten besprechen.