ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง
21 October 2010 By Ninenik Narkdeeข้อความเลื่อนขึ้น แนวตั้ง jquery ข้อความเลื่อนลง marquee
ไปที่
Copy
สามารถนำไปใช้กับ การวนแสดง 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>
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy