ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง
21 October 2010สามารถนำไปใช้กับ การวนแสดง banner หรือข้อความ หรืออื่นๆ ได้
ตัวอย่าง
http://www.ninenik.com/demo/jquery_marquee_vertical.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 vertical</title>
<style type="text/css">
body{
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดพื้นที่ของ div ข้อความเลื่อน */
.containMarquee{
position:relative;
top:100px;
width:300px;
margin:auto;
display:block;
height:250px;
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 newTop;
var obj;
$(function(){
var divCover_h=$(".containMarquee").height(); // หาความสูงพื้นที่ส่วนแสดง marquee
var divMarquee_h=$(".obj_marquee").height(); //หาความสูงของเนื้อหา marquee
obj=$(".obj_marquee"); // กำหนดเป็น ตัวแปร jQuery object
marquee_direction=1; /* กำหนดการเลื่อนซ้ายขวา 1 = ล่างขึ้นบน 2 = บนลงล่าง */
marquee_speed=30; // กำหนดความเร็วของเวลาในการเคลื่อนที่ ค่ายิ่งมาก จะช้า
marquee_step=2; // กำหนดระยะการเคลื่อนที่ ค่ายิ่งมาก จะเร็ว
obj.css("top",(marquee_direction==1)?divCover_h:-divMarquee_h);
marquee_move=function(obj){
marquee_status=setTimeout(function(){
move_marquee(obj)
},marquee_speed);
}
move_marquee=function(obj){
var condition_mq=(marquee_direction==2)?'newTop<divCover_h':'newTop>-divMarquee_h';
var initLeft=(marquee_direction==1)?divCover_h:-divMarquee_h;
newTop=(marquee_direction==1)
?parseInt(obj.css('top'))-marquee_step
:parseInt(obj.css('top'))+marquee_step;
if(eval(condition_mq)){
obj.css({
'top':newTop+'px'
});
}else{
obj.css("top",initLeft);
}
marquee_move(obj);
}
marquee_move(obj);
$(".containMarquee").mouseover(function(){
clearTimeout(marquee_status);
}).mouseout(function(){
marquee_move(obj);
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2865 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 6296 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 6060 22 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2 อ่าน 1723 25 Sep 08 ป้องกันคนคลิกขวา และ ป้องกันคน select ข้อความ อ่าน 2154 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 3648 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 11026 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 5377 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 4803 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 5293 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 3479 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4911 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 2026 08 Nov 09 เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table อ่าน 8791 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 9336 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 4210 19 Oct 08 คำสั่ง SQL functions อ่าน 4871 23 Nov 09 ทำการ cache หน้าเว็บไซต์ด้วย php class อย่างง่าย อ่าน 2492 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 4532 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1857