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 Marquee แบบรูปภาพ

คำสั่ง behavior กำหนดรูปแบบของการเคลื่อนที่ ด้วย marquee


BEHAVIOR = "scroll/slide/alternate" 

ความหมาย

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

 Source Code   ผลลัพท์(results)
<marquee behavior="scroll" ><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
<marquee behavior="slide" ><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee> 
<marquee behavior="alternate" ><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>


คำสั่ง direction กำหนดทิศทางในการเคลื่อนที่ ด้วย marquee


DIRECTION= "left/right/up/down" 

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

Source Code ผลลัพท์(results)

<marquee direction="left"><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
 

<marquee direction="right"><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
 

<marquee direction="up"><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
 

<marquee direction="down"><img  src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
 

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


scrollamount="ตัวเลข"  ความเร็วของการเคลื่อนที่ ตัวเลขยิ่งมากยิ่งเคลื่อนที่เร็ว

Source Code ผลลัพท์(results)
<marquee scrollamount="1"><img src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg"/></marquee>
<marquee  scrollamount="10"><img src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
<marquee scrollamount="20"><img src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg" /></marquee>
<marquee scrollamount="50"><img src="http://yourdomain.com/download/yourdomain_com/folder/picture.jpg"/></marquee>

การทำภาพสไลด์ต่อเนื่องกันหลายภาพ ด้วย Marquee


 Source Code   ผลลัพท์(results)
<marquee ><img  src="http://tips.ninenic.com/download/tips_ninenic_com/slide1/show1_1.jpg" /><img src="http://tips.ninenic.com/download/tips_ninenic_com/slide1/show1_2.jpg" /><img src="http://tips.ninenic.com/download/tips_ninenic_com/slide1/show1_3.jpg" /> <img  src="http://tips.ninenic.com/download/tips_ninenic_com/slide1/show1_4.jpg" /> </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