Scroller, pokazywacz komunikatów, reklam itp.

On

Pod tym wybitnym tytułem, kryje się obiekt w Javascript, który powstał pewnego dnia w przerwie pomiędzy pierwszą kanapką a drugą ;). W każdym razie umożliwia on łatwo osiągnięcie takiego efektu jak widać to poniżej.

A oto kod obiektu:

function Scroller(divID,stringsArray) {
 
	var pause=3000;
 
	var currentIndex=0;
	var mainDiv=document.getElementById(divID);
	var innerDiv=document.createElement('div');
	mainDiv.style.overflow='hidden';
 
	mainDiv.appendChild(innerDiv);	
 
	var marginTop;
	var stepDelta=2;
 
	var initScrolling = function() {
		marginTop=mainDiv.offsetHeight;
		innerDiv.innerHTML=stringsArray[currentIndex];
		innerDiv.style.marginTop=marginTop+'px';
	}
 
	var CountDelta = function() {
		var newDelta=Math.sin(marginTop/mainDiv.offsetHeight)*10;
		if (newDelta<=0.01) { newDelta=0.01; }	
		return newDelta;
	}	
 
	var SetPosition = function() {
		stepDelta=CountDelta()
 
		if (marginTop>0) {
			marginTop-=stepDelta;			
			innerDiv.style.marginTop=marginTop+'px';
		}
 
		return marginTop;
	}
 
	var nextString = function() {
		if (currentIndex<stringsArray.length-1) {
			currentIndex++;
		} else {
			currentIndex=0;
		}
		startScrolling();
	}
 
	var startScrolling = function() {
 
		initScrolling();
 
		var stepInterval = window.setInterval(function () {
			if (SetPosition()<=0) {
				clearInterval(stepInterval);
				setTimeout(nextString,pause);
			} 
		},10);
	}
 
	startScrolling();
}

A tutaj przykład użycia:

<html>
<head>
<script src="scroller.js" type="text/javascript" language="javascript"></script>
</head>
<body>
 
<div id="scroller" style="width:300px;height:70px;padding:5px;background-color:orange;font-size:8pt;font-family:verdana;"></div>
 
<script type="text/javascript" language="javascript">
//<![CDATA[
 
var Strings=new Array();
Strings[0]='Hi! Jestem mrówka!';
Strings[1]='Lorem ipsum dolor sit amet consectetuer turpis lacinia Curabitur vel a. Massa morbi Donec est in leo consequat vestibulum lobortis enim.';
Strings[2]='Lákamí vůněhulás úmyval rohlivý jednovod lek vlač Partavěď ka vla.';
Strings[3]='Massa morbi Donec est in leo consequat vest. Massa morbi Donec est in leo consequat vest, massa morbi Donec est in leo consequat vest.';
 
var scroller=new Scroller('scroller',Strings);
//]]>
</script>
 
 
</body>
</html>

W pierwszym parametrze konstruktora przekazujemy ID warstwy na której chcemy wyświetlać komunikaty, w drugim natomiast tablicę z komunikatami. Voila.

Przetestowane pod Firefox2, IE7, Opera9.