上がるマーキーがあります。テキストのスクロールが完了すると (再び表示される前に)、マーキー領域は約 2 秒間空になり、その後再び表示されます。
それが空になるのを防ぎ、最後の行が上がる前に最初の行が来るようにする方法はありますか?
上がるマーキーがあります。テキストのスクロールが完了すると (再び表示される前に)、マーキー領域は約 2 秒間空になり、その後再び表示されます。
それが空になるのを防ぎ、最後の行が上がる前に最初の行が来るようにする方法はありますか?
JavaScript を使用して実行できます。
<!DOCTYPE html>
<html>
<head>
<title>Scroll demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="container" style="position: absolute; width: 200px; height: 200px; background-color: grey">
</div>
<script type="text/javascript">
var maxy = 200; // adjust
var lineHeight = 17; // adjust
var lines = new Array("line1", "line2", "line3");
var textDivs = new Array(lines.length);
for(var i=0;i<lines.length;i++) {
var divx = document.createElement("div");
var divxText = document.createTextNode(lines[i]);
divx.style.top=String(maxy-(lines.length-i)*lineHeight)+"px";
divx.style.position="absolute";
divx.appendChild(divxText);
textDivs[i] = divx;
document.getElementById("container").appendChild(divx);
}
window.setInterval("scroll()", 50);
function scroll() {
for(var i=0;i<textDivs.length;i++) {
var divx = textDivs[i];
var y = parseInt(divx.style.top);
y = y-1;
if(y<0) y = maxy-lineHeight;
divx.style.top =String(y)+"px";
}
}
</script>
</body>
</html>