كتب هذا المثال من قبلي أثناء دراسته مرة أخرى. آمل أن يساعد الجميع على التعلم معًا. يظهر التأثير في الشكل:
يبدو رمز HTML هكذا:
نسخة الكود كما يلي:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<head>
<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> <!-إضافة قناع من ثلاثة مستويات->
<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) ؛"> </viv> <!-نفس تأثير Mask1->
<img id = "img6" onClick = ""/>
<div onclick = "javaScript: jzk.ui.moveimg (-2) ؛"> </viv> <!-نفس تأثير Mask2->
<img id = "img7" onClick = ""/>
<div onclick = "javaScript: jzk.ui.moveimg (-3) ؛"> </viv> <!-نفس التأثير مثل 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 ؛ الموقف: النسبي ؛ الهامش: 130 بكسل 106px ؛}
#PIC_BROWSER IMG {position: absolute ؛ الحدود: لا شيء ؛}
.prev {top: 76px ؛ اليسار: 0px ؛ }
#img1 ، .mask3 {العرض: 106px ؛ الارتفاع: 70px ؛ اليسار: 45px ؛ أعلى: 61px ؛ z-index: 4 ؛}
#img2 ، .mask2 {العرض: 166px ؛ الارتفاع: 110px ؛ اليسار: 95px ؛ أعلى: 41px ؛ z-index: 5 ؛}
#img3 ، .mask1 {width: 226px ؛ الارتفاع: 150px ؛ اليسار: 175px ؛ Top: 21px ؛ z-index: 6 ؛}
#img4 {width: 290px ؛ الارتفاع: 192px ؛ اليسار: 285px ؛ أعلى: 0px ؛ z-index: 7 ؛}
#img5 ، .mask5 {العرض: 226px ؛ الارتفاع: 150px ؛ اليمين: 175px ؛ أعلى: 21px ؛ z-index: 6 ؛}
#img6 ، .mask6 {width: 166px ؛ الارتفاع: 110px ؛ اليمين: 95px ؛ Top: 41px ؛ z-index: 5 ؛}
#img7 ، .mask7 {العرض: 106px ؛ الارتفاع: 70px ؛ اليمين: 45px ؛ أعلى: 61px ؛ z-index: 4 ؛}
.next {top: 76px ؛ اليمين: 0px ؛}
.mask1 ، .mask2 ، .mask3 ، .mask5 ، .mask6 ، .mask7 {background: #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 = وظيفة (إزاحة)
{
قاعدة = (إيقاف الأساس) ؛
لـ (var i = base ؛ i <base +7 ؛ i ++)/*تعريف i كموضعية متغيرة للمصفوف*/
{
var img = document.getElementById ('img'+(i-base+1)) ؛/*تأكد من أن متغير IMG هو img1 ، img2 ، img3 ... حتى IMG7 ، هذه العناصر 7 IMG*/
إذا كان (I <0) / *Array Array Subcript I <0 ، مما يشير إلى الإزاحة> 0 ، * /
{
img.src = imgarray [imgarray.length+i] ؛
}
آخر إذا (i> imgarray.length-1)
{
img.src = imgarray [i-imgarray.length] ؛
}
آخر
{
img.src = imgarray [i] ؛
}
}
}
jzk.app = {} ؛ /*الطبقة الثالثة الطبقة*/
jzk.app.initimg = function ()/* تهيئة صورة العرض ، أي ، استدعاء وظيفة moveimg. IMG2 = Imgarray [-6+7] ...*/
{
jzk.ui.moveimg (7) ؛/*يجب تعيين المعلمات الأولية على: عدد الصور التي يمكن عرضها (7 هنا) ؛ */
}
من الصعب فهم الملفات الثلاثة بواسطة رمز JS. لقد قدمت أيضا تعليقات مفصلة أعلاه. إذا كان بإمكان أي شخص آخر قراءته ولا يفهمه ، فيمكنك مناقشته في التعليقات أدناه.