Ticker

세로

function initTicker(container, mover, delay) {
	speed = 100;	// milisecond

	container.moveOffset = container.offsetHeight;

	container.cont = mover;
	container.cont.currentHeight = 0;
	container.cont.innerHTML += container.cont.innerHTML;

	container.move = window.setInterval(function () {
		container.cont.currentHeight--;
		container.cont.style.top = container.cont.currentHeight + "px";
		if (container.cont.currentHeight % (container.cont.offsetHeight / 2) == 0) {
			container.cont.currentHeight = 0;
		}
	}, speed);
}
initTicker(document.getElementById("notice-container"), document.getElementById("notice-mover"), 10000);

가로

좌우로 글자가 흐르면서 내용을 보여주는 효과

<div id="point-ranking-container" class="container">
	<p>

		<span>
			1위 : 홍길동(호부호형) 543chem / 
			2위 : 길동이(가나다라) 436chem / 
			3위 : 홍길동(호부호형) 343chem // 
		</span>
	</p>
</div>
<script type="text/javascript">
initTicker(document.getElementById("point-ranking-container"));
</script>

#point-ranking-container {
	position: relative;
	width: 533px;
	height: 1.3em;
	overflow: hidden;
}
#point-ranking p {
	margin: 0;
}

function initTicker(container) {
	mover = container.getElementsByTagName("p").item(0);
	text = mover.getElementsByTagName("span").item(0);

	// set
	mover.style.position = "absolute";
	mover.style.margin = "0 0 0 0";
	mover.style.left = "0px";
	mover.leftPosition = 0;
	mover.style.width = text.childNodes.item(0).length + "em";	// stretch width
	textWidth = text.offsetWidth;

	if (textWidth > container.offsetWidth) {	// enough space for move
		// duplicate text
		mover.style.width = textWidth * 2 + "px";
		mover.innerHTML += mover.innerHTML;

		// set action
		mover.tickerAction = window.setInterval(function() {
			if (mover.leftPosition * -1 > textWidth) {
				mover.leftPosition = -1;
			} else {
				mover.leftPosition -= 1;
			}
			mover.style.left = mover.leftPosition + "px";
		}, 40);
	}
}