SEARCH    
 
   - A   + A
พบกับทิป และทริก(Tips and trick) สำหรับการออกแบบเซ็บไซต์ ด้วย for เว้บไซต์สำเร็จรูป-ninenic.com
www.tips.ninenic.com
HOME เกี่ยวกับเรา ติดต่อเรา
 

การทำข้อความสไลด์ด้วย MARQUEE
 แนะนำโดย : เว็บไซต์สำเร็จรูป-Ninenic

 Marquee เป็น code ที่นำมาใช้ในการตกแต่งหน้าเว็บเพจ ซึ่งมีหลายรูปแบบสามารถนำมาใช้กับข้อความหรือ รูปภาพ เช่น แสดงข้อความ หรือรูปภาพแบบเลื่อน (scrolling) ต่อไปนี้เป็นคำแนะนำในการใช้ Code Marquee แบบง่ายๆในการตกแต่งเว็บเพจ

 การนำข้อความสไลด์ หรือรูปภาพด้วย Marquee  ใส่ลงในเว็บเพจบน Webedit ของเว็บไซต์สำเร็จรูป - Ninenic คลิกที่นี่ค่ะ

ตัวอย่างการใส่ Code Marquee แบบข้อความ


 ที่หน้า webedit ของเว็บไซต์สำเร็จรูป-NineNIC
1. คลิกที่ปุ่ม source หรือปุ่ม ดูรหัส html
2. วาง code marquee ลงไปตามตัวอย่าง
3. คลิกปุ่ม Save

ตัวอย่างการใส่ code maquee แบบง่ายๆ

ตัวอย่างการใช้ Code Marquee แบบง่าย ในการตกแต่งเว็บไซต์

การใช้โค๊ด marquee นั้น จะขึ้นต้นด้วย <marquee> ตามด้วยข้อความ และปิดท้ายด้วย </marquee>

 Source Code   ผลลัพท์(results)
<marquee >ข้อความ</marquee> ข้อความ

 

การกำหนดค่า Code Marquee 

ใช้คำสั่ง BEHAVIOR กำหนดรูปแบบของการเคลื่อนที่

BEHAVIOR = "scroll/slide/alternate" 

ความหมาย
Scroll       : ข้อความเคลื่อนวนไปเรื่อยๆ
Slide        : ข้อความเลื่อนหนึ่งครั้งแล้วหยุด
Alternate : ข้อความเคลื่อนไปมา

 Source Code   ผลลัพท์(results)
<marquee behavior="scroll" >ข้อความ</marquee> ข้อความ
<marquee behavior="slide" >ข้อความ...หยุด</marquee> ข้อความ...หยุด
<marquee behavior="alternate">ข้อความ...</marquee> ข้อความ...


การใช้คำสั่ง DIRECTION กำหนดทิศทางในการเคลื่อนที่

DIRECTION= "left/right/up/down"   
   
ความหมาย  
left : ข้อความให้เลื่อนจากขวาไปซ้าย  
right : ข้อความให้เลื่อนจากซ้ายไปขวา  
up : ข้อความให้เลื่อนจากล่างไปบน  
down : ข้อความให้เลื่อนจากบนไปล่าง  


 Source Code   ผลลัพท์(results)
<marquee direction="left">ใส่ข้อความให้เลื่อนจากขวาไปซ้าย</marquee> ใส่ข้อความให้เลื่อนจากขวาไปซ้าย
<marquee direction="right">ใส่ข้อความให้เลื่อนจากซ้ายไปขวา</marquee> ใส่ข้อความให้เลื่อนจากซ้ายไปขวา
<marquee direction="down">ใส่ข้อความให้เลื่อนจากบนไปล่าง</marquee> ใส่ข้อความให้เลื่อนจากบนไปล่าง
<marquee direction="up">ใส่ข้อความให้เลื่อนจากล่างไปบน</marquee> ใส่ข้อความให้เลื่อนจากบนไปล่าง


คำสั่ง scrollamount กำหนดความเร็วในการเคลื่อนที่


scrollamount="ตัวเลข"  

ความหมาย
ความเร็วของการเคลื่อนที่ ตัวเลขยิ่งมากยิ่งเคลื่อนที่เร็ว
Source Code ผลลัพท์(results)
<marquee  scrollamount="1">ความเร็ว..ช้ามาก</marquee> ความเร็ว..ช้ามาก
<marquee  scrollamount="10">ความเร็ว...ค่อนข้างเร็ว</marquee> ความเร็ว...ค่อนข้างเร็ว
<marquee  scrollamount="20">ความเร็ว...เร็ว</marquee> ความเร็ว...เร็ว
<marquee  scrollamount="50">ความเร็ว...เร็วมาก</marquee> ความเร็ว...เร็วมาก

ตัวอย่างการกำหนดค่า Code Marquee เพิ่มเติม

สร้างกรอบด้วย marquee แบบที่ 1


คำอธิบายเพิ่มเติม

style="border:#ff0000  กำหนดสีของเส้นกรอบ

2px SOLID"  กำหนดขนาดของเส้นกรอบ

 Source Code   ผลลัพท์(results)
<marquee style="border:#ff0000 2px SOLID"> ข้อความ</marquee> ข้อความ


สร้างกรอบด้วย marquee แบบที่ 2

คำอธิบายเพิ่มเติม


tyle="background:#ff0000"  กำหนดให้มีสีพื้นหลังที่ข้อความ

 Source Code   ผลลัพท์(results)
<marquee  style="background:#ff0000"> ข้อความ</marquee> ข้อความ

กำหนดให้การเคลื่อนที่หยุดเมื่อนำเมาส์ชี้ ด้วย Marquee


คำอธิบายเพิ่มเติม
onmouseout="this.start()" onmouseover="this.stop()" เป็น คำสั่งที่ทำให้ข้อความหยุดเคลื่อนที่เมื่อเมาส์โดนข้อความ

 Source Code   ผลลัพท์(results)
<marquee onmouseout="this.start()" onmouseover="this.stop()">ข้อความ</marquee> ข้อความ

กำหนดความสูงของการเคลื่อนที่ ด้วย Marquee

height="50" กำหนดขนาดความสูงในการเคลื่อนที่ หน่วยเป็น Pixel

 Source Code   ผลลัพท์(results)
<marquee direction="down"  height="50">ข้อความ</marquee> ข้อความ
<marquee direction="down"  height="100">ข้อความ</marquee> ข้อความ


กำหนดความกว้างของการเคลื่อนที่ด้วย Marquee


width="ตัวเลข%" กำหนดขนาดความสูงในการเคลื่อนที่ หน่วยเป็น Percent

width="ตัวเลข" กำหนดขนาดความสูงในการเคลื่อนที่ หน่วยเป็น Pixel

 Source Code   ผลลัพท์(results)
<marquee   width="100">ข้อความ</marquee> ข้อความ
<marquee   width="50%">ข้อความ</marquee> ข้อความ

การกำหนดค่าตัวอักษร

style="color:#ff6600; กำหนดสีตัวอักษรโดยใช้โค้ดสี
style="color:orange; กำหนดสีตัวอักษรโดยใช้ชื่อสี
font-size : 16;" กำหนดขนาดของตัวอักษร

 Source Code   ผลลัพท์(results)
<marquee style="color:#ff6600;font-size : 16;">ข้อความ</marquee> ข้อความ
<marquee style="color:orange;font-size : 22;">ข้อความ</marquee> ข้อความ

More Marquee Codes


www.tips.ninenic.com
HOME เกี่ยวกับเรา ติดต่อเรา
Web hosting | website builder |เว็บไซต์สำเร็จรูป by ninenic ©Copyright 2002-2024 All rights reserved.
บริษัท อีคอมสยาม ดอทคอม จำกัด
82/8 หมู่ 6 ถ.ประชาราษฎร์
ต.ตลาดขวัญ อ.เมือง จ.นนทบุรี 11000
Tel : 029682665 Fax: 029683400
Email : info@ecomsiam.com