สามารถนำไปใช้กับ การวนแสดง banner หรือข้อความ หรืออื่นๆ ได้
ตัวอย่าง
https://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
https://www.ninenik.com/demo/jquery_marquee.php
