ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อนขึ้น เลื่อนลง คล้าย marquee แนวตั้ง

21 October 2010 By Ninenik Narkdee

ข้อความเลื่อนลง แนวตั้ง marquee jquery ข้อความเลื่อนขึ้น

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความเลื่อนลง แนวตั้ง marquee jquery ข้อความเลื่อนขึ้น

สามารถนำไปใช้กับ การวนแสดง 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ

Tags:: ข้อความเลื่อนขึ้น marquee ข้อความเลื่อนลง jquery แนวตั้ง

URL สำหรับอ้างอิง

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ