PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

12 August 2010 By


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


Tags:: marquee เลื่อน ข้อความ jquery





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