ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee
12 August 2010สามารถนำไปใช้กับ การวนแสดง banner หรือข้อความ หรืออื่นๆ ได้
ตัวอย่าง
http://www.ninenik.com/demo/jquery_marquee.php
PHP Ajax CSS Javascript jQuery MySQL
โค้ดตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery marquee trick</title>
<style type="text/css">
body{
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดพื้นที่ของ div ข้อความเลื่อน */
.containMarquee{
position:relative;
width:500px;
margin:auto;
display:block;
height:20px;
border:1px dashed #CCC;
line-height:20px;
background-color:#FF6;
overflow:hidden;
}
/* css กำหนดข้อความ สำหรับการทำ marquee */
.obj_marquee{
position:absolute;
display:block;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="containMarquee">
<span class="obj_marquee">
PHP Ajax CSS Javascript jQuery MySQL
</span>
</div>
<br />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var move_marquee;
var marquee_status;
var marquee_move;
var marquee_speed;
var marquee_step;
var marquee_direction;
var newLeft;
var obj;
$(function(){
var divCover_w=$(".containMarquee").width(); // หาความกว้างพื้นที่ส่วนแสดง marquee
var divMarquee_w=$(".obj_marquee").width(); //หาความกว้างของเนื้อหา marquee
obj=$(".obj_marquee"); // กำหนดเป็น ตัวแปร jQuery object
marquee_direction=1; /* กำหนดการเลื่อนซ้ายขวา 1 = จากขวามาซ้าย 2 = จากซ้ายไปขวา */
marquee_speed=30; // กำหนดความเร็วของเวลาในการเคลื่อนที่ ค่ายิ่งมาก จะช้า
marquee_step=5; // กำหนดระยะการเคลื่อนที่ ค่ายิ่งมาก จะเร็ว
obj.css("left",(marquee_direction==1)?divCover_w:-divMarquee_w);
marquee_move=function(obj){
marquee_status=setTimeout(function(){
move_marquee(obj)
},marquee_speed);
}
move_marquee=function(obj){
var condition_mq=(marquee_direction==2)?'newLeft<divCover_w':'newLeft>-divMarquee_w';
var initLeft=(marquee_direction==1)?divCover_w:-divMarquee_w;
newLeft=(marquee_direction==1)
?parseInt(obj.css('left'))-marquee_step
:parseInt(obj.css('left'))+marquee_step;
if(eval(condition_mq)){
obj.css({
'left':newLeft+'px'
});
}else{
obj.css("left",initLeft);
}
marquee_move(obj);
}
marquee_move(obj);
$(".containMarquee").mouseover(function(){
clearTimeout(marquee_status);
}).mouseout(function(){
marquee_move(obj);
});
});
</script>
</body>
</html>
ดูตัวอย่างออนไลน์ คลิกขวาเพิ่อ view source
http://www.ninenik.com/demo/jquery_marquee.php
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2299 11 Aug 10 ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บ อ่าน 17763 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9332 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2856 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2151 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17299 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10257 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2168 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7137 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3851 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1864 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5374 15 Sep 10 สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ อ่าน 3726 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1614 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 4625 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3703 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3928