Một khác để tạo hiệu ứng một tự động cuộn từ phải sang trái trong một khung v�... tại


Demo:
|

Cách cài đặt

Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
Mã:
<script type="text/javascript">
	
	var useWidth = "400px";
	var speed = 250 // greater is slower;

	var message = "Now is the time for all good men to come to the aid of their country. That's one small step for man, one giant leap for mankind. Ask not what your country can do for you, ask what you can do for your country. | ";

	// Remember to include the vertical bar | at the end of the message(s);

	var mContainer = "";
	var circleMsg = "";
	var prevMsg =  "";
	var useFloat = "";
	var xV = 0;
	var xL = 0;
	var msgLength = 0;
	
	function updateMessage(){
		
		if (circleMsg == ""){circleMsg = mContainer.lastChild.data}
		else {circleMsg = prevMsg}
		var separatorIdx = circleMsg.lastIndexOf('|');
		if (separatorIdx == -1){separatorIdx = msgLength}
		circleMsg = circleMsg.substring(1,separatorIdx);
		var spliceStr = message.substring(0,msgLength-separatorIdx-1);
		var dispMsg = circleMsg+spliceStr;
		mContainer.removeChild(mContainer.lastChild);
		mContainer.appendChild(document.createTextNode(dispMsg));
		prevMsg = circleMsg+'|'+spliceStr;
		setTimeout("updateMessage()",speed);
	}

	function startCrawl(){

		mContainer.appendChild(document.createTextNode(message))
		setTimeout("updateMessage()",3000);  // delay before crawl start;
	}

	function stayHome(){

		var nV = 0;
		var nL = 0;
		if(!document.body.scrollTop)
			{
			 nV = document.documentElement.scrollTop;
			 nL = document.documentElement.scrollLeft;
			}
		else	{
			 nV = document.body.scrollTop;
			 nL = document.body.scrollLeft;
			}
		if (nV == 0){window.scrollBy(0,1)}
		useFloat.style.top = nV+xV+"px";
		useFloat.style.left = nL+xL+"px";
		setTimeout("stayHome()",50);
	}

	window.onload=function(){

		mContainer = document.getElementById('crawl');
		document.getElementById('isFloat').style.width = useWidth;
		msgLength = message.length;
		useFloat = document.getElementById('isFloat');
		useFloat.style.left = ((screen.width-30)/2)-(parseInt(useWidth)/2)+"px";
		xV = useFloat.offsetTop;
		xL = useFloat.offsetLeft;
		stayHome();
		startCrawl();
	}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->
Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML
Mã:
<Div id='isFloat' style='position:absolute;bottom:20px;overflow:hidden;height:28px;border:solid black 1px;font-size:14pt;background-color:lightyellow;color:darkblue'>

<Div id='crawl' style='padding:3px;white-space:nowrap'></Div>

</Div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->


Bạn có thể xem các mã tương tự bên dưới
-
-
-
Bạn có thể xem thêm nhiều JavaScript khác về




- -