memo.xight.org

Home > Changelogメモ > 2006-07 > 2006-07-14 > JavaScriptでリストをスクロール

2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2006-07-14

JavaScriptでリストをスクロール

- Summary
livedoor knowledge の質問がスクロールしている部分について．
gimmick.js を読んでみた．

function scrollTips(id, interval) {
	var tips = document.getElementById(id);
	removeWithoutElement(tips);
	var height = getPixcelValue(tips.style["height"]);
	var beforeLast = tips.childNodes.length - 1;
	var orgScrollTop = tips.scrollTop;
	if (orgScrollTop == (height * beforeLast)) {
		while (--beforeLast >= 0) {
			tips.appendChild(tips.removeChild(tips.firstChild));
		}
		orgScrollTop = 0;
		tips.scrollTop = 0;
	}
	var i = 1;
	var scrollDelay = window.setInterval(
		function() {
			tips.scrollTop = orgScrollTop + i;
			if (++i > height) {
				clearInterval(scrollDelay);
				scrollDelay = 0;
			}
		}
	, interval);
}
 
function removeWithoutElement(node) {
	var child = node.firstChild;
	while (child) {
		var nextSibling = child.nextSibling;
		if (child.nodeType != 1) {
			node.removeChild(child);
		}
		child = nextSibling;
	}
}
 
function getPixcelValue(pixcel) {
	var px = pixcel.indexOf("px");
	return (px == -1) ? pixcel: pixcel.substring(0, px);
}

<html>
	<head>
		<style>
			.tips {
				line-height: 125%;
				height: 65px;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div id="tipsList" style="float:right;width:153px;height:65px;overflow:hidden;">
			<div class="tips"><a href="#">1件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">2件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">3件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">4件目のコンテンツです。</a></div>
			<div class="tips"><a href="#">5件目のコンテンツです。</a></div>
		</div>
		<script type="text/javascript">
			window.setInterval("scrollTips('tipsList', 15)", 2000);
		</script>
	</body>
</html>