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>Reference
livedoor knowledgehttp://knowledge.livedoor.com/