แท็กสำหรับสร้างทิกเกอร์ วิธีทำทิกเกอร์และทิกเกอร์ในไดอารี่ บริการทำโปสการ์ดสำเร็จรูป

ก่อนที่จะศึกษาบทใหญ่ถัดไป ฉันจะบอกคุณเล็กน้อยเกี่ยวกับสิ่งเล็กๆ น้อยๆ บางอย่างที่ไม่เป็นไปตามระเบียบทั่วไป แต่บางครั้งคุณก็ทำไม่ได้หากไม่มีสิ่งเหล่านั้น องค์ประกอบเหล่านี้พูดเป็นรูปเป็นร่าง ภาษา HTMLจะช่วยแก้ไขปัญหาต่างๆ ที่คุณมักพบเมื่อสร้างเพจใดเพจหนึ่ง ดังนั้นคุณจึงไม่ควรปฏิบัติต่อพวกเขาด้วยการดูถูก

อักขระพิเศษ

บางครั้งและบางครั้งบ่อยครั้ง เช่น บนเว็บไซต์นี้ ข้อความไม่สามารถทำได้หากไม่มีเครื่องหมาย "น้อยกว่า" -< и "больше чем"- >แต่จะเกิดอะไรขึ้นถ้าเบราว์เซอร์กำหนดวลีที่อยู่ในอักขระเหล่านี้เป็นแท็ก และจะไม่แสดงวลีนั้นบนจอภาพ หรือสมมติว่าคุณจำเป็นต้องเขียนบางส่วนในข้อความ แต่ไม่ได้ให้คำสั่งอื่นแก่เบราว์เซอร์ แต่เพื่อให้ตัวอย่างวิธีการเขียนถึงผู้เยี่ยมชมหน้า?

เพื่อจุดประสงค์เหล่านี้จึงได้คิดค้นอักขระพิเศษขึ้นมา

ตัวอย่างเช่น อักขระพิเศษ< - будет значить что в этом месте текста нужно поставить знак < а спецсимвол >แสดงด้วยสัญลักษณ์ >

อักขระพิเศษทั้งหมดเริ่มเขียนด้วยเครื่องหมาย & - เครื่องหมายนี้บ่งบอกให้เบราว์เซอร์ทราบว่าชื่อของอักขระพิเศษจะตามมาและไม่ควรมองว่าเป็นข้อความ แต่เป็นคำสั่ง มีคำถามอื่นเกิดขึ้น: จะใส่เครื่องหมาย & - เครื่องหมาย - ในข้อความที่มีไว้สำหรับแสดงบนหน้าจอได้อย่างไร?

เครื่องหมาย & ยังมีอักขระพิเศษของตัวเอง - &

นี่คือที่มาของความสับสน...

นอกจากนี้บางที ความสนใจเป็นพิเศษสมควรได้รับตัวละครพิเศษ - นี่ พื้นที่ไม่ทำลายเราเจอมันแล้ว ความจริงก็คือเมื่อคุณเขียนข้อความลงในสมุดบันทึกหรือ โปรแกรมแก้ไข HTMLคุณสามารถใส่ช่องว่าง "ธรรมดา" ระหว่างคำได้มากเท่าที่คุณต้องการ แต่เมื่อเบราว์เซอร์อ่านหน้าเว็บ คำเหล่านั้นจะถูก "ลบออก" ทั้งหมด และจะไม่มีช่องว่างระหว่างคำบนหน้าเว็บมากกว่าหนึ่งช่อง สิ่งนี้มักจะนำไปสู่ปัญหากับการออกแบบข้อความ ตัวอย่างเช่น ไม่มีวิธีสร้างเส้นสีแดง... ดังนั้นผู้คนจึงมีอักขระพิเศษขึ้นมา เบราว์เซอร์จึงมองว่าไม่ใช่ช่องว่าง แต่เป็นเครื่องหมายเท่านั้น มองไม่เห็นด้วยตามนุษย์

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

ตัวอย่างการใช้อักขระพิเศษ:

ตัวอย่างในตัวอย่าง

< /td>

< html> < head> < title>หน้าแรกของฉัน< /title> < /head> < body> < center>< h2>สวัสดีชาวโลก!!!< /h2>< /center> < br> นี่คือหน้าแรกของฉัน! < /body> < /html>

ตัวอย่างภายในตัวอย่าง... ทำให้เกิดความคิดเชิงปรัชญาเกี่ยวกับความไม่มีที่สิ้นสุด...

ตอนนี้คุณรู้แล้วว่าตัวอย่างทั้งหมดนี้มีลักษณะอย่างไรบน "อีกด้านหนึ่งของหน้าจอ" อย่างไรก็ตาม ตั้งแต่ฉันเริ่มเปิดเผยความลับทางการทหาร ตัวอย่างนี้เป็นตารางที่มีสองเซลล์ โดยเซลล์หนึ่งบางทางด้านซ้ายทำหน้าที่ตกแต่งล้วนๆ. ดังนั้นหากคุณต้องเผชิญกับงานวาดเซลล์ตารางโดยไม่มีเนื้อหาใดๆ ให้ใส่อักขระเว้นวรรคเข้าไป จำกฎที่ว่าที่นี่ต้องมีอะไร? อักขระช่องว่างพิเศษเป็นหนึ่งในเอาต์พุตในกรณีนี้

นอกเหนือจากที่กล่าวมาข้างต้น ยังมีสัญลักษณ์พิเศษทั้งชุดที่ไม่มีอยู่ด้วย: สัญลักษณ์จักรราศี ชุดไพ่ แท่ง จุด ต้นคริสต์มาส วงกลม เศษส่วน... ไม่ได้มีไว้สำหรับงาน "พิเศษ" บางอย่างอีกต่อไป แต่เพียงปฏิบัติตามบทบาทของตนเนื่องจากไม่มีอักขระเหล่านี้บนแป้นพิมพ์ คุณสามารถดู "คอลเลกชัน" ของตัวละครพิเศษของฉันได้

เส้นแนวนอน

เรียบง่าย แท็กใหม่ลากเส้นแนวนอนในหน้าต่าง โดยไม่ต้องใช้แท็กปิด มักใช้ในเค้าโครงหน้าเป็นองค์ประกอบตกแต่ง

มีคุณสมบัติหลายประการ align - การจัดตำแหน่งด้วยหนึ่งในนั้น สามความหมาย(center, left, right ) สามารถใช้ได้หากกำหนดความยาวของบรรทัด คุณลักษณะความกว้างเป็นพิกเซลหรือเปอร์เซ็นต์ คุณยังสามารถตั้งค่าแอตทริบิวต์ความหนาของเส้น - ขนาด แอตทริบิวต์สี - สี และหากจำเป็น ให้ปิดการใช้งานเงาของเส้น noshade

เส้นแนวนอน


นี่เป็นเพียงบรรทัดเริ่มต้น:

นี่คือเส้นที่ไม่มีเงา:

นี่คือเส้นที่วาดด้วยสีนกกระเรียน:

บรรทัดยาว 250 พิกเซล:

เส้นยาว 250 เส้นและหนา 5 พิกเซล:

เส้น 500 ยาว 50 หนา สีฟ้า:

ตัวอย่างการจัดตำแหน่ง:

ในความคิดของฉัน มันค่อนข้างง่ายและมีประสิทธิภาพ

ทิกเกอร์

แท็ก ทำให้ข้อความที่วางอยู่ในนั้นเคลื่อนที่ไปในทิศทางเดียวหรืออีกทางหนึ่ง หรืออีกนัยหนึ่งคือ ทำให้เป็นเส้นที่คืบคลาน เส้นคืบคลานมีการตั้งค่าการเลื่อนจำนวนหนึ่ง ซึ่งกำหนดโดยคุณลักษณะต่อไปนี้:

พฤติกรรม - กำหนดประเภทของการเลื่อนที่สามารถมีได้ ค่าต่อไปนี้:

• ทางเลือก - การเคลื่อนไหวแบบสั่นจากขอบหนึ่งไปอีกขอบ
• scroll - เลื่อนข้อความ ข้อความจะหายไปจากหน้าจอและปรากฏขึ้นอีกครั้งที่ฝั่งตรงข้าม
• สไลด์ - เลื่อนข้อความโดยหยุด

scrollamount - ความเร็วในการเลื่อนตั้งแต่ 1 ถึง 10
loop กำหนดจำนวนครั้งที่ทิกเกอร์เลื่อน

ทิศทาง - ทิศทางของการเคลื่อนไหวของข้อความ ค่า:

• ขึ้น - ขึ้น
• ลงลง,
• ซ้าย - ซ้าย
• ขวา - ไปทางขวา

bgcolor - สีพื้นหลังของเส้นคืบคลาน
ความสูง - ความสูงของเส้น
ความกว้าง - ความกว้างของเส้น

ทิกเกอร์


เส้นวิ่ง
สัญลักษณ์เริ่มต้น
เส้นวิ่งจากซ้ายไปขวา
ทิกเกอร์วิ่งจากขอบหนึ่งไปอีกขอบหนึ่ง
ทิกเกอร์ที่ความเร็ว 10
ทิกเกอร์ที่ความเร็ว 1
บรรทัดนี้จะเลื่อนเพียงสองครั้งเท่านั้น
เส้นวิ่งที่มีจุดหยุด
เส้นคืบคลานที่มีพื้นหลัง
สัญลักษณ์ที่มีการจำกัดความกว้างของการเลื่อน
เส้นวิ่งจากล่างขึ้นบน
เส้นคืบคลานที่มีการเยื้องจากเส้นขอบ

ฉันคิดว่าคุณจะเข้าใจตัวเองว่าอะไรคืออะไร ลองใช้ การรวมกันต่างๆคุณสมบัติเพื่อให้ได้ผลลัพธ์ที่คุณต้องการ ฉันจะเพิ่มว่าคุณสามารถทำเช่นเดียวกันกับข้อความบนบรรทัดที่กำลังวิ่งได้เช่นเดียวกับข้อความธรรมดา: เปลี่ยนขนาด สี สไตล์ แบบอักษร สร้างวลีจากบรรทัดเป็นลิงก์... โดยการเขียน แท็กที่จำเป็นภายในแท็ก

ในบทความนี้ฉันจะพูดถึงวิธีสร้างเส้นคืบคลานบนเว็บไซต์โดยใช้วิธีพิเศษ แท็ก HTML- เริ่มต้นด้วยการเป็นที่น่าสังเกตว่าการใช้สัญลักษณ์เป็นแอนิเมชั่นบางประเภทบนเว็บไซต์ไม่เป็นที่นิยมมาเป็นเวลานาน พวกเขาพูดเกี่ยวกับไซต์ดังกล่าวที่มาจากศตวรรษที่ผ่านมา

ในความคิดของฉัน ในสภาวะปัจจุบัน เป็นการดีกว่าที่จะไม่ใช้ทิกเกอร์เลย ใน กรณีที่รุนแรงสามารถใช้เพื่อการมองเห็นที่ดีขึ้นเท่านั้น ข้อมูลสำคัญ(เช่น โปรโมชั่นปัจจุบัน, ส่วนลด) มีคนอื่นอีกมากมาย วิธีการที่ทันสมัยคุณจะถ่ายทอดมันให้ผู้ใช้ได้อย่างไร? ข้อมูลที่เป็นประโยชน์(ภาพเคลื่อนไหวแบบแฟลช, แบนเนอร์)

นอกจากนี้ ยังเป็นที่น่าสังเกตว่ามีวิธีอื่นในการสร้างทิกเกอร์นอกเหนือจากแท็กปะรำ วิธีการนี้ใช้งานผ่าน JavaScript แต่เนื่องจากการใช้งานที่ไม่เหมาะสม (โหลดหน้า) เราจะไม่พิจารณาด้วยซ้ำ

แท็ก HTML

ดังนั้นใน HTML จึงมีแท็กพิเศษสำหรับสร้างสัญลักษณ์: .... มันมีคุณสมบัติมากมายพร้อมตัวเลือกที่ค่อนข้างเรียบง่าย ดังนั้นการตั้งค่าจึงไม่น่าจะมีปัญหาใด ๆ ด้านล่างนี้ ผมจะวิเคราะห์รายละเอียดคุณลักษณะและพารามิเตอร์ทั้งหมดของแท็กปะรำ อย่างไรก็ตาม มันสามารถมีได้ไม่เพียงแต่ข้อความเท่านั้น แต่ยังมีรูปภาพและองค์ประกอบอื่น ๆ ของเว็บไซต์อีกด้วย ดังนั้นบทความนี้ยังตอบคำถามเกี่ยวกับวิธีสร้างภาพที่กำลังวิ่ง วัตถุ ฯลฯ อีกด้วย

ไวยากรณ์แท็ก

วัตถุที่จะย้ายคุณสมบัติและพารามิเตอร์

1. width="number/percentage" - ตั้งค่าความกว้างของเส้นที่คืบคลานเป็นพิกเซล/เปอร์เซ็นต์ ผู้ที่คุ้นเคยกับ html คงจะคุ้นเคยกับคุณลักษณะนี้ ตัวอย่างเช่น:

• width="240px" - ตั้งค่าความกว้างเป็น 240 พิกเซล
• width="40%" - ตั้งค่าความกว้างเป็น 40% ขึ้นอยู่กับความกว้างของบล็อกที่วัตถุนั้นตั้งอยู่

2. height="number/percentage" - ตั้งค่าความสูงของเส้นที่คืบคลานเป็นพิกเซล/เปอร์เซ็นต์ ตัวอย่างสามารถได้รับเช่นเดียวกับแอตทริบิวต์แรก ตัวอย่างเช่น:

• height="400px" - ตั้งค่าความสูงเป็น 400 พิกเซล
• height="30%" - ตั้งค่าความสูงเป็น 30% ขึ้นอยู่กับความสูงของบล็อกที่วัตถุนั้นตั้งอยู่

หมายเหตุ: หากเส้นคืบคลานประกอบด้วยเพียงบรรทัดเดียวจะไม่สามารถระบุความสูงได้เนื่องจากจะถูกกำหนดโดยอัตโนมัติขึ้นอยู่กับขนาดตัวอักษรซึ่งระบุโดยพารามิเตอร์ขนาดตัวอักษร: Npx

3. bgcolor="color" - กำหนดสีพื้นหลังของคอนเทนเนอร์ คุณสามารถเลือกสีบนหน้า: รหัสสี html หมายเหตุ: หากไม่ได้ตั้งค่าแอตทริบิวต์ bgcolor พื้นหลังจะใช้สีพื้นหลังของหน้าเป็นค่าเริ่มต้น

4. behavior="parameter" - นี่คือหนึ่งในคุณลักษณะที่สำคัญที่สุดของทิกเกอร์ มันกำหนดพฤติกรรมของทิกเกอร์ มีค่อนข้างมาก ตัวเลือกต่างๆ:
- สลับกัน - ทิกเกอร์จะเคลื่อนที่แบบวน: จากขวาไปซ้าย จากนั้นจากซ้ายไปขวา (วิ่งระหว่างขอบ) ตัวอย่างเช่น:

และนี่คือลักษณะของบรรทัดนี้บนเว็บไซต์:

สตริงที่มีแอตทริบิวต์ behavior="alternate"

เลื่อน - เส้นคืบคลานเคลื่อนออกนอกพื้นที่ในทิศทางที่ระบุโดยแอตทริบิวต์ทิศทาง (พร้อมพารามิเตอร์) จากนั้นวนซ้ำ ในความคิดของฉัน ตัวเลือกนี้เป็นเรื่องธรรมดาที่สุด ตัวอย่างเช่น:

- สไลด์ - คล้ายกับการเลื่อนมาก แต่เมื่อถึงจุดสิ้นสุดบรรทัดจะหยุดและไม่เกิดซ้ำ ตัวอย่างเช่น:

สตริงที่มีแอ็ตทริบิวต์ behavior="slide" direct="right"

5. ทิศทาง = "พารามิเตอร์" - กำหนดทิศทางการเคลื่อนที่ของเส้นคืบคลาน สามารถรับค่าต่อไปนี้:
- ลง - เคลื่อนจากบนลงล่าง ตัวอย่างเช่น:

สอดคล้องกับพฤติกรรม = "เลื่อน" ทิศทาง = "ลง" แอตทริบิวต์

- ขึ้น - การเคลื่อนไหวจากล่างขึ้นบน ตัวอย่างเช่น:

สตริงที่มีแอ็ตทริบิวต์พฤติกรรม = "เลื่อน" ทิศทาง = "ขึ้น"

- ซ้าย - เคลื่อนที่จากขวาไปซ้าย หมายเหตุ: ซ้ายเป็นค่าเริ่มต้น ตัวอย่างเช่น:

สอดคล้องกับลักษณะการทำงาน = "เลื่อน" ทิศทาง = "ซ้าย"

- ขวา - การเคลื่อนไหวจากซ้ายไปขวา ตัวอย่างเช่น:

สอดคล้องกับแอตทริบิวต์ behavior="scroll" ทิศทาง="right"

6. hspace="number" - ตั้งค่าการเยื้องแนวนอนของเส้นไปยังวัตถุอื่น แท็ก img ยอดนิยมมีคุณสมบัติคล้ายกัน

7. vspace="number" - กำหนดระยะห่างในแนวตั้งให้กับวัตถุอื่น

8. loop="number" - คุณต้องเลื่อนเนื้อหากี่ครั้ง พารามิเตอร์ระบุตัวเลขที่ระบุจำนวนการทำซ้ำ หมายเหตุ: ตัวเลข -1 หมายถึง วงจรไม่มีที่สิ้นสุดเลื่อน ค่าเริ่มต้นคือ -1

9. scrollamount="number" - ความเร็วในการเคลื่อนที่ของเส้นคืบคลาน ตัวเลขระบุจำนวนพิกเซลที่วัตถุจะเคลื่อนที่ในรอบนาฬิกาหนึ่งรอบ หมายเหตุ: ความเร็วเริ่มต้นคือ 6 พิกเซล/วินาที ตัวอย่างเช่น:

สตริงที่มีแอตทริบิวต์ scrollamount="10"

10. scrolldelay="number" - ตั้งค่าการหน่วงเวลาระหว่างขั้นตอนของทิกเกอร์ในหน่วยมิลลิวินาที ตัวอย่างเช่น:

สตริงที่มีแอตทริบิวต์ scrolldelay="500"

สุดท้ายนี้ผมจะยกตัวอย่างการใช้เส้นคืบคลาน 2 ตัวอย่าง ตัวอย่างการใช้วัตถุ div:

วิ่ง องค์ประกอบ div

กำลังรันองค์ประกอบ div

ตัวอย่างภาพที่กำลังวิ่ง:

ข้อความ

แท็กนี้มีความหมายและคุณลักษณะมากมาย:

1) ทิศทาง – กำหนดทิศทางการเคลื่อนไหวของข้อความ ค่าแอตทริบิวต์ที่เป็นไปได้:

• ซ้าย - ไปทางขวา;
• ขวาซ้าย;
• ขึ้น – ขึ้น;
• ลงลง;

2)พฤติกรรม – รับผิดชอบประเภทของการเลื่อน ค่าที่ยอมรับ:

• scroll – การเคลื่อนไหวของข้อความในทิศทางเดียว
• สไลด์ – การเคลื่อนไหวครั้งเดียวตามด้วยการหยุด (ข้อความป๊อปอัป);
• สลับ - เข้า ทิศทางที่กำหนดและกลับมา

3)loop – กำหนดจำนวนรอบการทำซ้ำ ค่าที่เป็นไปได้:

• อนันต์ – จำนวนรอบไม่สิ้นสุด (ค่าเริ่มต้น)
• จำนวนเต็ม.

4)scrollmount – ตั้งค่าความเร็วในการเคลื่อนที่ของเส้นคืบคลาน รับค่าจำนวนเต็ม

5)ความกว้าง – กำหนดความยาวของพื้นที่เคลื่อนที่

6)ความสูง – กำหนดความสูงของพื้นที่ที่เคลื่อนที่

7)scrolldelay – ตั้งเวลาหน่วงระหว่างรอบในหน่วยมิลลิวินาที

คุณลักษณะแท็กที่เหลือจะเหมือนกันกับองค์ประกอบทั้งหมดของภาษาไฮเปอร์เท็กซ์

แท็กถูกสร้างขึ้นโดยเฉพาะสำหรับ อินเทอร์เน็ตเบราว์เซอร์สำรวจ. จนกระทั่งเมื่อไม่นานมานี้ เบราว์เซอร์อื่นบางตัวไม่ยอมรับ แต่ตอนนี้ทุกคนเห็นแล้ว

และถ้าคุณ "เล่น" โค้ดเพียงเล็กน้อย คุณไม่เพียงแต่จะทำให้ข้อความ แต่ยังทำให้รูปภาพเคลื่อนไหวได้ด้วย และนี่ก็เป็นอยู่แล้ว ระดับแรกแอนิเมชั่นสุภาพบุรุษ!

นี่คือรหัสสำหรับตัวอย่างนี้:

เอดิทร์-มาดริด! จะพาฉันไปไหน!!!

เส้นที่กำลังคืบคลานสำหรับ Joomla

สำหรับเจ้าของเว็บไซต์ที่ใช้ CMS ตัวอย่างข้างต้นจะใช้ไม่ได้ จะแม่นยำยิ่งขึ้น แต่คุณต้องรู้ว่าคุณสามารถ "ติด" ตัวอย่างนี้ในโค้ด html ได้ที่ไหน และนี่ไม่ใช่เรื่องง่าย

CMS ทั้งหมดถูกสร้างขึ้นบน อิง PHP, ซึ่งเป็น ภาษาเซิร์ฟเวอร์การเขียนโปรแกรม มีการเขียนโค้ดที่รับผิดชอบในการสร้างหน้าเว็บไซต์ นั่นคือแต่ละองค์ประกอบของหน้าเว็บไซต์ (“ส่วนท้าย”, “ส่วนหัว”) จะถูกสร้างขึ้นระหว่างการเรียกใช้โค้ด ดังนั้นแก้ไข รหัส PHPไม่จำเป็นต้องมีเว็บไซต์ของคุณเองบน CMS

เส้นคืบคลานสำหรับ Joomla สามารถใช้งานได้โดยการติดตั้งปลั๊กอินพิเศษ หนึ่งในนั้นเรียกว่าการย้ายข้อความ มาดูการติดตั้งทีละขั้นตอน:

1. ไปที่แผงควบคุม Joomla ผ่านจุด เมนูด้านบน“ส่วนขยาย” ไปที่ “ตัวจัดการส่วนขยาย”
2. บนแท็บ "การติดตั้ง" ของผู้จัดการ เลือกตัวเลือกการดาวน์โหลด และคลิกที่ปุ่ม "ติดตั้ง":

3. จากนั้นไปที่ “ตัวจัดการปลั๊กอิน”
4. ในรายการด้านล่างที่เราพบ ปลั๊กอินที่จำเป็น- ทำเครื่องหมายและคลิกที่ปุ่ม "เปลี่ยน" ที่ด้านบน ถัดจากนั้นคือปุ่ม "เปิดใช้งาน" ซึ่งทำหน้าที่เปิดใช้งานส่วนขยาย:

5. ในหน้าต่างถัดไป ในช่อง "พารามิเตอร์พื้นฐาน" ให้ตั้งค่าพารามิเตอร์การแสดงผลสำหรับเส้นที่วิ่งอยู่ (ความยาว ความเร็ว และช่วงเวลาระหว่างรอบ) หลังจากทำการเปลี่ยนแปลงแล้ว อย่าลืมคลิกที่ปุ่ม “บันทึก” (ขวาบน)
6. จากนั้นผ่านรายการเมนูหลัก "วัสดุ" ไปที่ "ตัวจัดการวัสดุ" ทำเครื่องหมายในช่องด้านล่าง วัสดุที่จำเป็นและคลิกที่ปุ่ม "เปลี่ยน" (วงกลมด้วยดินสอ)
7. ในตัวแก้ไข คลิกที่ปุ่ม “html” หน้าต่างตัวแก้ไขโค้ดจะเปิดขึ้นบนหน้าจอ เราวางที่นั่น ( text= ข้อความที่จำเป็น- แทนที่จะเป็น "ข้อความที่จำเป็น" ให้เขียนสิ่งที่เราต้องการแล้วคลิก "อัปเดต":

หลังจากนี้ เส้นวิ่งจะปรากฏในเนื้อหาที่แก้ไข:

ตัวเลือกอื่นๆ สำหรับการนำทิกเกอร์ไปใช้

การเรียกใช้ข้อความสามารถนำไปใช้ได้ไม่เฉพาะกับ ใช้ htmlและติดตั้งปลั๊กอิน ตัวเลือกการใช้งานในจาวาสคริปต์ถือว่าค่อนข้างดี นี่คือตัวอย่างวิธีการทำงาน:

นี่คือโค้ดบางส่วนที่อยู่ในแท็ก:

ฟังก์ชั่น outmsg(msg,ctrlwidth) ( msg = " --- "+msg newmsg = msg while (newmsg.length< ctrlwidth) {newmsg += msg} document.write ("") document.write ("") document.write ("") rollmsg() } function rollmsg() { NowMsg=document.Outmsg.outmsg.value NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1) document.Outmsg.outmsg.value = NowMsg bannerid=setTimeout("rollmsg()",100) }

และนี่คือสคริปต์ส่วนหนึ่งที่ต้องวางในตำแหน่งที่แสดงเส้นคืบคลาน:

outmsg("เห็นเส้นนี้ไหม มันวิ่งอยู่! ไชโย!!!",70)

คุณยังสามารถใช้ข้อความที่กำลังรันโดยใช้ไลบรารี jquery:

รหัสตัวอย่างได้รับเต็ม หากต้องการ คุณสามารถแยก css, jquery และ html ออกเป็นไฟล์แยกกันได้:

$(function() ( var marquee = $("#marquee"); marquee.css(("overflow": "hidden", "width": "100%")); // wrapper สำหรับข้อความในรูปแบบของ span ( IE ไม่ชอบ div ที่มี inline-block) marquee.wrapInner(""); marquee.find("span").css(( "width": "50%", "display": "inline-block) ", "text" -align"center" )); marquee.append(marquee.find("span").clone()); // ที่นี่เรามีสองช่วงที่มีข้อความ marquee.wrapInner(""); marquee.find(" div").css("width", "200%"); var reset = function() ( $(this).css("margin-left", "0%"); $(สิ่งนี้ ).animate(( "margin-left": "-100%" ), 12000, "linear", รีเซ็ต ); reset.call(marquee.find("div")); .string( width:600px; height:30px; margin:60px auto; line-height:28px; padding: 0 10px; border-radius:4px; box-shadow:0 1px 2px #777; -moz-border-radius: 4px; -webkit-border-radius:4px; พื้นหลัง: rgb(238,238,238); พื้นหลัง: -moz-linear-gradient(บนสุด, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); - การไล่ระดับสี (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, หยุดสี(0%,rgba(238,238,238,1)), หยุดสี(100%,rgba(204,204,204,1))); พื้นหลัง: -webkit-linear-gradient (ด้านบน, rgba (238,238,238,1) 0%, rgba (204,204,204,1) 100%); พื้นหลัง: -o-linear-gradient (ด้านบน, rgba (238,238,238,1) 0%, rgba (204,204,204,1) 100%); พื้นหลัง: -ms-linear-gradient (ด้านบน, rgba (238,238,238,1) 0%, rgba (204,204,204,1) 100%); พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปด้านล่าง, rgba (238,238,238,1) 0%, rgba (204,204,204,1) 100%); ตัวกรอง: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc",GradientType=0); ) บรรทัดที่มีข้อความเพื่อแสดงโฆษณาที่สำคัญบนเว็บไซต์

ผลลัพธ์เป็นอย่างไร?

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