javascriptによるラスタースクロールの動作サンプル

　「プロとして恥ずかしくないJavaScriptの大原則」のP.79に掲載してある、画像をうねうねさせて表示するサンプルコードについて、動かないっていうコメントをもらったんで、手元のIE6で動いているバージョンを掲載しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"><!--
body { background: #f8dce0; }
#img_ { position: absolute; left: 150px; top: 100px; }
--></style>
<script language="JavaScript"><!--
var rstdv = 60;
var rastr = new Array();
var amplt = 10;
var frqnc = 2;
var ilocx = 20;
var ilocy = 20;
var protx = 0;
var proty = 0;
var speed = 1;
var rstfq = 0;
var rstfl = "anime01.gif";
var ID = "rst";
var hdl = false;

function raster() {
	var img0 = "<img src=\"" + rstfl + "\" id=\"" + ID;
	var img1 = "\" style=\"POSITION: absolute; DISPLAY: block;\">";
	
	document.write(img0 + "0" + img1);
	var rstht = document.getElementById(ID+"0").height;
	var rstwh = document.getElementById(ID+"0").width;
	if(rstdv > rstht) rstdv = rstht;
	
	var piece = rstht / rstdv;
	rstfq = (frqnc * Math.PI) / rstdv;
	for (var i = 1; i <= rstdv; i++) {
		document.write(img0 + i + img1);
	}
	
	pxmax = amplt + Math.sin(Math.PI * 0.5);
	for (i = 0; i <= rstdv; i++) {
		rastr[i] = document.getElementById(ID + i);
		var rctmp = "rect(" + piece * i + " " + rstwh + " " + piece * (i+1) + " 0)";
		rastr[i].style.clip = rctmp;
		protx = amplt * Math.sin(rstfq * i);
		rastr[i].style.pixelTop = ilocx;
		rastr[i].style.pixelLeft = ilocy + pxmax - protx;
	}
}

function scroll() {
	var pxmax = amplt * Math.sin(Math.PI * 0.5);
	
	proty = (proty % (2 * Math.PI)) + rstfq * speed;
	
	for (var i = 0;i <= rstdv; i++) {
		protx = amplt * Math.sin(rstfq * i + proty);
		rastr[i].style.pixelLeft = ilocy + pxmax - protx;
	}
}

function clickswitch() {
	if(hdl) {
		clearInterval(hdl);
		hdl = false;
		return;
	}
	hdl = setInterval('scroll()', 50);
}
--></script>
</head>
<body>
<div id="img_">
<script>
raster();
</script>
</div>
<input type="button" name="switch" value="start/stop" onClick="clickswitch()">
</body>
</html>

m6u's blog

便利な製品・サービス・アプリを見つけては、その評価を書き続けるブログ

javascriptによるラスタースクロールの動作サンプル