1. قم بإدراج طبقة في DreamWeaver واستخدم هذه الطبقة كمنطقة للتمرير. قم بتعيين معلمات الطبقة كما يلي:
قم بتعيين رقم الطبقة على: القاتل، وهو سمة معرف الطبقة.
القيمتان اليسرى والعليا هما موضع الطبقة على الصفحة ويمكن ضبطهما حسب الحاجة؛ وهنا هما 100 و120 بكسل.
العرض والارتفاع هما حجم الطبقة ويتم ضبطهما أيضًا حسب الحاجة؛
يشير المقطع إلى منطقة العرض الخاصة بالطبقة، ويتم إخفاء الجزء الموجود خارج المقطع ونستخدم منطقة العرض هذه لإخفاء الجزء الأيمن من الطبقة، ومن ثم التحكم في حركة الطبقة مع التحكم في منطقة العرض هذه لإكمال التمرير. تأثير المنطقة الذي نريده.
اضبط عرض الشاشة على اليمين، هنا 340؛ الجزء السفلي يساوي الارتفاع.
وفيما يلي رمز الطبقة:
< div id = "slayer" style = "position:absolute؛ top: 120px؛ left: 100px؛ clip: rect(0 340 120 0)؛ الارتفاع: 120px؛ لون الخلفية: #CCCCCC؛ لون خلفية الطبقة: # CCCCCC؛ الحدود: 1 بكسل لا يوجد #000000؛ العرض: 670 بكسل">
يمكننا وضع بعض الصور أفقيًا في الطبقة، وهنا نستخدم جدولًا بدلاً من ذلك. حجم الطبقة الموضحة أعلاه يكفي لاستيعاب جميع الصور.
2. الكود التالي هو كود تمرير الطبقة، والذي نقوم بإدراجه أسفل علامة الطبقة <div>:
عند الإدراج، لاحظ أن قيمة الطبقة W هي القيمة الموجودة على الجانب الأيمن من المقطع، وهي 340 هنا.
<لغة البرنامج = "جافا سكريبت">
< !-- //بواسطة hve
var LayerW=340; // اضبط عرض منطقة العرض
var LayerH=parseInt(slayer.style.height);
var LayerL=parseInt(slayer.style.left);
var LayerT=parseInt(slayer.style.top);
فار الخطوة = 0؛ // قيمة التمرير
وظيفة موفستار (أ، الوقت) {
إذا (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
موف (أ)؛
movx=setTimeout("movstar("+a+"،"+time+")"،time);
}
نقل الوظيفة () {
ClearTimeout(movx);
}
وظيفة موف (أ) {
slayer.style.left = (step+=a) +layerL;
clipL=0-step;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-->
<// البرنامج النصي >
3. أدخل طبقة أخرى لوضع "زر التحكم".
تقع هذه الطبقة أسفل الطبقة السابقة وتستخدم لوضع "أزرار التحكم" ويمكن تعديل موضعها حسب الحاجة، كما هو موضح أدناه. نستخدم الكتل الملونة للجدول كأزرار تحكم هنا وسيكون من الأفضل أن نصنع صورتين على شكل سهم.
4. قم بإضافة الرموز التالية في علامات "أزرار التحكم".
تتم إضافة ذلك في علامة الجدول <td> إذا كنت تستخدم صورة كزر، فأضفها في علامة <img>.
الزر الأيسر:
onMouseDown = "movover ()؛ movstar (3،2)" onMouseOut = "movover ()" onMouseOver = "movstar (1،20)" onMouseUp = "movover ()؛ movstar (1،20)"
الزر الأيمن:
onMouseDown = "movover ()؛ movstar (-3،2)" onMouseOut = "movover ()" onMouseOver = "movstar (-1،20)" onMouseUp = "movover ()؛ movstar (-1،20)"
معنى الكود أعلاه هو أنه عندما يشير الماوس إلى الزر، يبدأ الإجراء، ويتسارع الضغط مع الاستمرار على الزر، ويترك الماوس الزر لإيقاف الإجراء، وتشير العلامة - إلى الحركة في الاتجاه المعاكس.
5. أكمل
عندما يشير الماوس إلى "زر التحكم"، فسيتم التمرير إلى اليسار أو اليمين، وسيؤدي النقر مع الاستمرار على الماوس إلى تسريع عملية التمرير.
الكود بأكمله هو: (يمكن نسخه واختباره في منطقة الجسم)
< div id = "slayer" style = "position:absolute؛ top: 120px؛ left: 100px؛ clip: rect(0 340 120 0)؛ الارتفاع: 120px؛ لون الخلفية: #CCCCCC؛ لون خلفية الطبقة: # CCCCCC؛ الحدود: 1 بكسل لا يوجد #000000؛ العرض: 670 بكسل">
<لغة البرنامج = "جافا سكريبت">
< !-- //بواسطة hve
var LayerW=340; // اضبط عرض منطقة العرض
var LayerH=parseInt(slayer.style.height);
var LayerL=parseInt(slayer.style.left);
var LayerT=parseInt(slayer.style.top);
فار الخطوة = 0؛ // قيمة التمرير
وظيفة موفستار (أ، الوقت) {
إذا (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
موف (أ)؛
movx=setTimeout("movstar("+a+"،"+time+")"،time);
}
نقل الوظيفة () {
ClearTimeout(movx);
}
وظيفة موف (أ) {
slayer.style.left = (step+=a) +layerL;
clipL=0-step;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-->
<// البرنامج النصي >
< جدول تباعد الخلايا = "10" الحدود = "0" خلية الحشو = "0" >
<tr bgcolor="#FFCC99">
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< ارتفاع الارتفاع = "100" العرض = "100" > </ /td >
< /تر>
</الجدول>
</ديف>
< div id = "Layer1" style = "position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px" >
< عرض الجدول = "100%" الارتفاع = "100%" >
<تر>
< td bgcolor = "#CCCCCC" height = "14" onMouseDown = "movover ()؛ movstar (3،2)" onMouseOut = "movover ()" onMouseOver = "movstar (1،20)" onMouseUp = "movover () ;movstar(1,20)" width="14" >< /td >
< تد >< / تد >
< td bgcolor = "#CCCCCC" height = "14" onMouseDown = "movover ()؛ movstar (-3،2)" onMouseOut = "movover ()" onMouseOver = "movstar (-1،20)" onMouseUp = "movover" ();movstar(-1,20)" width="14" >< /td >
< /تر>
</الجدول>
</ديف>