Этот пример был написан мной во время изучения его снова и снова. Я надеюсь, что это может помочь всем учиться вместе. Эффект показан на рисунке:
HTML -код выглядит следующим образом:
Кода -копия выглядит следующим образом:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<голова>
<название> Создание инструмента просмотра изображения </title>
<script type = "text/javascript" src = "js/main.js"> </script>
<link rel = "styleSheet" type = "text/css" href = "style/css.css">
</head>
<тело>
<div id = "pic_browser">
<img src = "Images/prev.png" onclick = "javascript: jzk.ui.moveimg (-1);"/>
<img id = "img1" onclick = ""/>
<div onclick = "javaScript: jzk.ui.moveimg (3);"> </div> <!-Добавить трехуровневую маску->
<img id = "img2" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (2);"> </div> <!-Добавить вторичную маску->
<img id = "img3" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (1);"> </div> <!-Добавить уровень маски->
<img id = "img4" onclick = ""/>
<img id = "img5" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-1);"> </div> <!-тот же эффект, что и Mask1->
<img id = "img6" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-2);"> </div> <!-тот же эффект, что и Mask2->
<img id = "img7" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-3);"> </div> <!-тот же эффект, что и Mask3->
<img src = "Images/next.png" onclick = "javascript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
Код CSS выглядит следующим образом:
Маска1, 2, 3 ... Вот девчон, охватывающий несколько фотографий. Атрибут непрозрачности используется для определения прозрачности, которая может достичь чувства туманности и сделать внешний вид более красивым.
Кода -копия выглядит следующим образом:
Body {ширина: 1340px; высота: 500px; фон: url (../ image/body_bg.gif) no-repeat;}
#pic_browser {ширина: 860px; высота: 192px; Положение: относительно; маржа: 130px 106px;}
#pic_browser img {position: absolute; граница: нет;}
.prev {top: 76px; слева: 0px; }
#img1, .mask3 {width: 106px; высота: 70px; слева: 45px; top: 61px; z-index: 4;}
#img2, .mask2 {width: 166px; высота: 110px; слева: 95px; top: 41px; z-index: 5;}
#img3, .mask1 {width: 226px; высота: 150px; слева: 175px; top: 21px; z-index: 6;}
#img4 {width: 290px; высота: 192px; слева: 285px; top: 0px; z-index: 7;}
#img5, .mask5 {width: 226px; высота: 150px; справа: 175px; top: 21px; z-index: 6;}
#img6, .mask6 {width: 166px; высота: 110px; справа: 95px; top: 41px; z-index: 5;}
#img7, .mask7 {width: 106px; высота: 70px; справа: 45px; top: 61px; z-index: 4;}
.next {top: 76px; справа: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {founal: #fff; position: Absolute;}
.mask1, .mask5 {непрозрачность: 0,3;}
.mask2, .mask6 {непрозрачность: 0,5;}
.mask3, .mask7 {непрозрачность: 0,7;}
Код JS выглядит следующим образом:
Кода -копия выглядит следующим образом:
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 = {}; /*Определить пространство имен*/
jzk.tools = {};/*Слоистый первый слой*/
jzk.ui = {};/*Слоистый второй слой*/
jzk.ui.moveimg = function (смещение)
{
base = (base-offset);
Для (var i = base; i <base +7; i ++)/*определить i как подписчик переменной для массива*/
{
var img = document.getElementbyId ('img'+(i-base+1));/*Убедитесь, что переменная IMG IMG1, IMG2, IMG3 ... до IMG7, эти 7 IMG-элементы*//
if (i <0) / *Scippript i <0, указывающий на смещение> 0, * /
{
img.src = imgarray [imgarray.length+i];
}
else if (i> imgarray.length-1)
{
img.src = imgarray [i-imgarray.length];
}
еще
{
img.src = imgarray [i];
}
}
}
jzk.app = {}; /*Слоистый третий слой*/
jzk.app.initimg = function ()/* Инициализируйте изображение отображения, то есть вызовите функцию Перемещение. img2 = imgarray [-6+7] ...*/
{
jzk.ui.moveimg (7);/*Начальные параметры должны быть установлены на: количество изображений, которые можно отобразить (7 здесь); */
}
Три файла трудно понять под кодом JS. Я также дал подробные комментарии выше. Если кто -то еще может прочитать это и не понять это, вы можете обсудить это в комментариях ниже.