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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
เลื่อน ข้อความ marquee jquery

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

ดูแล้ว 17,035 ครั้ง


สามารถนำไปใช้กับ การวนแสดง 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



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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