이 예는 다시 공부하면서 저에 의해 작성되었습니다. 모든 사람이 함께 배우는 데 도움이되기를 바랍니다. 효과는 그림에 나와 있습니다.
HTML 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html xmlns = "http://www.w3.org/1999/xhtml : lang ="en "lang ="en ">
<헤드>
<title> 그림 브라우징 도구 생성 </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 = "images/prev.png"onclick = "javaScript : jzk.ui.moveimg (-1);"/>
<img id = "img1"onclick = ""/>
<div onclick = "javaScript : jzk.ui.moveimg (3);"> </div> <!-3 레벨 마스크 추가->
<img id = "img2"onclick = ""/>
<div onclick = "javaScript : jzk.ui.moveimg (2);"> </div> <!-2 차 마스크 추가->
<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 코드는 다음과 같습니다.
Mask1, 2, 3 ... 여기 여러 사진을 다루는 DIV가 있습니다. 불투명 속성은 투명성을 정의하는 데 사용되며, 이는 흐릿함을 얻고 외모를 더 아름답게 만들 수 있습니다.
코드 사본은 다음과 같습니다.
바디 {너비 : 1340px; 높이 : 500px; 배경 : url (../ images/body_bg.gif) no-Repeat;}
#pic_browser {너비 : 860px; 높이 : 192px; 위치 : 상대; 여백 : 130px 106px;}
#pic_browser img {위치 : 절대; 국경 : 없음;}
.prev {top : 76px; 왼쪽 : 0px; }
#img1, .mask3 {너비 : 106px; 높이 : 70px; 왼쪽 : 45px; 상단 : 61px; z-index : 4;}
#img2, .mask2 {너비 : 166px; 높이 : 110px; 왼쪽 : 95px; 상단 : 41px; z-index : 5;}
#img3, .mask1 {너비 : 226px; 높이 : 150px; 왼쪽 : 175px; 상단 : 21px; z-index : 6;}
#img4 {너비 : 290px; 높이 : 192px; 왼쪽 : 285px; 상단 : 0px; z-index : 7;}
#img5, .mask5 {너비 : 226px; 높이 : 150px; 오른쪽 : 175px; 상단 : 21px; z-index : 6;}
#img6, .mask6 {너비 : 166px; 높이 : 110px; 오른쪽 : 95px; 상단 : 41px; z-index : 5;}
#img7, .mask7 {너비 : 106px; 높이 : 70px; 오른쪽 : 45px; 상단 : 61px; z-index : 4;}
.next {top : 76px; 오른쪽 : 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {배경 : #fff; 위치 : 절대;}
.mask1, .mask5 {불투명도 : 0.3;}
.mask2, .mask6 {불투명도 : 0.5;}
.mask3, .mask7 {불투명도 : 0.7;}
JS 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
Window.onload = function ()
{
jzk.app.initimg ();
}
var imgarray = 새로운 배열 ();
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 = 함수 (오프셋)
{
base = (기본 오프셋);
for (var i = base; i <base +7; i ++)/*배열의 변수 첨자로 정의하십시오*/
{
var img = document.getElementById ( 'IMG'+(i-base+1));/*IMG 변수가 img1, img2, img3인지 확인하십시오 ... IMG7 까지이 7 개의 IMG 요소*/
if (i <0) / *배열 위시 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 ()/* 디스플레이 이미지 초기화, 즉 함수 MoveIMG 프로세스를 호출합니다. 매개 변수는 7, i는 -7, -6, -5, -4, -3, -2, -1과 같고 해당 요소는 IMG1, IMG2, ... IMG7이므로 IMG1 = IMGARRAY [-7+7]. img2 = Imgarray [-6+7] ...*/
{
jzk.ui.moveimg (7);/*초기 매개 변수는 다음과 같이 설정해야합니다. 표시 할 수있는 그림 수 (7 여기); */
}
JS 코드는 세 가지 파일을 이해하기 어렵습니다. 또한 위의 자세한 의견을 제시했습니다. 다른 사람이 읽을 수 있고 이해하지 못하면 아래 의견에서 논의 할 수 있습니다.