Dreamweaver สร้างการเลื่อนแนวนอนที่ควบคุมได้

1. แทรกเลเยอร์ใน DreamWeaver และใช้เลเยอร์นี้เป็นพื้นที่เลื่อน ตั้งค่าพารามิเตอร์ของเลเยอร์ดังนี้:



ตั้งค่าหมายเลขเลเยอร์เป็น: slayer ซึ่งเป็นแอตทริบิวต์ ID ของเลเยอร์

ค่าด้านซ้ายและด้านบนคือตำแหน่งของเลเยอร์บนหน้าและสามารถตั้งค่าได้ตามต้องการ โดยที่นี่คือ 100 และ 120 พิกเซล

ความกว้างและความสูงคือขนาดของเลเยอร์และตั้งค่าตามความจำเป็นด้วย

คลิป หมายถึง พื้นที่แสดงผลของเลเยอร์ และส่วนนอกคลิปถูกซ่อน เราใช้พื้นที่แสดงผลนี้เพื่อซ่อนส่วนที่ถูกต้องของเลเยอร์ จากนั้นควบคุมการเคลื่อนไหวของเลเยอร์ในขณะที่ควบคุมพื้นที่แสดงผลนี้เพื่อให้การเลื่อนเสร็จสมบูรณ์ เอฟเฟกต์พื้นที่ที่เราต้องการ

ตั้งค่าความกว้างของจอแสดงผลทางขวาเป็น 340 ด้านล่างจะเท่ากับความสูง

ต่อไปนี้เป็นรหัสสำหรับเลเยอร์:

< div id = "slayer" style = "ตำแหน่ง: สัมบูรณ์; ด้านบน: 120px; ซ้าย: 100px; คลิป: ตรง (0 340 120 0); ความสูง: 120px; สีพื้นหลัง: #CCCCCC; เลเยอร์สีพื้นหลัง: # CCCCCC; เส้นขอบ: 1px ไม่มี #000000; ความกว้าง: 670px" >

เราสามารถวางรูปภาพในแนวนอนเป็นเลเยอร์ได้ แต่ในที่นี้เราใช้ตารางแทน ขนาดของเลเยอร์ที่ตั้งไว้ด้านบนนั้นเพียงพอที่จะรองรับรูปภาพทั้งหมดได้

2. โค้ดต่อไปนี้คือโค้ดการเลื่อนเลเยอร์ ซึ่งเราแทรกไว้ใต้เครื่องหมายเลเยอร์ <div>:

เมื่อแทรก โปรดทราบว่าค่าของ layerW คือค่าทางด้านขวาของคลิป ซึ่งก็คือ 340 ตรงนี้

< ภาษาสคริปต์ = "จาวาสคริปต์" >

< !-- //โดย hve

var layerW=340; //กำหนดความกว้างของพื้นที่แสดงผล

var layerH=parseInt(slayer.style.height);

var layerL=parseInt(slayer.style.left);

var layerT=parseInt(slayer.style.top);

var step=0; //เลื่อนค่า

ฟังก์ชั่น movstar (a, เวลา) {

if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)

mov(ก);

movx=setTimeout("movstar("+a+","+time+")",เวลา);

-

การย้ายฟังก์ชัน () {

เคลียร์ไทม์เอาต์(movx);

-

ฟังก์ชั่น mov(ก){

slayer.style.left = (ขั้นตอน+=a) + layerL;

คลิปL=0-ขั้นตอน;

clipR=ชั้น W-ขั้นตอน;

คลิปB=เลเยอร์H;

คลิปT=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. เสร็จสมบูรณ์

เมื่อเมาส์ชี้ไปที่ "ปุ่มควบคุม" มันจะเลื่อนไปทางซ้ายหรือขวา การคลิกเมาส์ค้างไว้จะทำให้การเลื่อนเร็วขึ้น

รหัสทั้งหมดคือ: (สามารถคัดลอกและทดสอบได้ในพื้นที่ BODY)

< div id = "slayer" style = "ตำแหน่ง: สัมบูรณ์; ด้านบน: 120px; ซ้าย: 100px; คลิป: ตรง (0 340 120 0); ความสูง: 120px; สีพื้นหลัง: #CCCCCC; เลเยอร์สีพื้นหลัง: # CCCCCC; เส้นขอบ: 1px ไม่มี #000000; ความกว้าง: 670px" >

< ภาษาสคริปต์ = "จาวาสคริปต์" >

< !-- //โดย hve

var layerW=340; //กำหนดความกว้างของพื้นที่แสดงผล

var layerH=parseInt(slayer.style.height);

var layerL=parseInt(slayer.style.left);

var layerT=parseInt(slayer.style.top);

var step=0; //เลื่อนค่า

ฟังก์ชั่น movstar (a, เวลา) {

if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)

mov(ก);

movx=setTimeout("movstar("+a+","+time+")",เวลา);

-

การย้ายฟังก์ชัน () {

เคลียร์ไทม์เอาต์(movx);

-

ฟังก์ชั่น mov(ก){

slayer.style.left = (ขั้นตอน+=a) + layerL;

คลิปL=0-ขั้นตอน;

clipR=ชั้น W-ขั้นตอน;

คลิปB=เลเยอร์H;

คลิปT=0;

slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+"";

-

-

</ /สคริปต์ >

< ตาราง cellspacing="10" border="0" cellpadding="0" >

<tr bgcolor="#FFCC99" >

< td height="100" width="100" > </ /td >

< td height="100" width="100" > </ /td >

< td height="100" width="100" > </ /td >

< td height="100" width="100" > </ /td >

< td height="100" width="100" > </ /td >

< td height="100" width="100" > </ /td >

</ /tr >

</ /ตาราง >

</ /div >

< div id="Layer1" style="position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px">

< ความกว้างของตาราง = "100%" ความสูง = "100%" >

<tr>

< 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 >< /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 >

</ /tr >

</ /ตาราง >

</ /div >