sanko--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja"><HEAD><title>画像をY軸回転させる</title>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<SCRIPT language=JavaScript><!--
iList = ["img0","img1","img2","img3","img4","img5"];
cx = 150; // 回転の中心X座標
cy = 100; // 回転の中心Y座標
cnt = 0;
rx = 140; // 回転半径(横)
ry = 70; // 回転半径(縦)
function rotZimg()
{
for (i=0; i<iList.length; i++)
{
n = (i * (360 / iList.length) + cnt++) * Math.PI / 180;
y = cy - Math.cos(n) * ry;
z = 100 - Math.cos(n) * 50; // 画像表示サイズと兼用
document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;
document.images[iList[i]].style.pixelTop = y;
document.images[iList[i]].style.zIndex = z;
document.images[iList[i]].style.width = z / 1.5;
document.images[iList[i]].style.height = z / 2;
}
}
// --></script>
</HEAD>
<BODY onload="setInterval('rotZimg()',100)">
<BASEFONT FACE="MS ゴシック">
<br><br>
<div align="center">
<H1>画像をY軸回転させる</H1>
<img style="Z-INDEX: 100; LEFT: 140px; POSITION: absolute; TOP: 70px" src="../../img/wa.gif">
<img style="POSITION: absolute" src="../../img/n.gif" name=img0>
<img style="POSITION: absolute" src="../../img/da.gif" name=img1>
<img style="POSITION: absolute" src="../../img/-.gif" name=img2>
<img style="POSITION: absolute" src="../../img/ra.gif" name=img3>
<img style="POSITION: absolute" src="../../img/n.gif" name=img4>
<img style="POSITION: absolute" src="../../img/do.gif" name=img5>
<br><br>
</BODY></HTML>
使用変数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja"><HEAD><title>画像をY軸回転させる</title>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<SCRIPT language=JavaScript><!--
iList = ["img0","img1","img2","img3","img4","img5"];
cx = 150; // 回転の中心X座標
cy = 100; // 回転の中心Y座標
cnt = 0;
rx = 140; // 回転半径(横)
ry = 70; // 回転半径(縦)
function rotZimg()
{
for (i=0; i<iList.length; i++)
{
n = (i * (360 / iList.length) + cnt++) * Math.PI / 180;
y = cy - Math.cos(n) * ry;
z = 100 - Math.cos(n) * 50; // 画像表示サイズと兼用
document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;
document.images[iList[i]].style.pixelTop = y;
document.images[iList[i]].style.zIndex = z;
document.images[iList[i]].style.width = z / 1.5;
document.images[iList[i]].style.height = z / 2;
}
}
// --></script>
</HEAD>
<BODY onload="setInterval('rotZimg()',100)">
<BASEFONT FACE="MS ゴシック">
<br><br>
<div align="center">
<H1>画像をY軸回転させる</H1>
<img style="Z-INDEX: 100; LEFT: 140px; POSITION: absolute; TOP: 70px" src="../../img/wa.gif">
<img style="POSITION: absolute" src="../../img/n.gif" name=img0>
<img style="POSITION: absolute" src="../../img/da.gif" name=img1>
<img style="POSITION: absolute" src="../../img/-.gif" name=img2>
<img style="POSITION: absolute" src="../../img/ra.gif" name=img3>
<img style="POSITION: absolute" src="../../img/n.gif" name=img4>
<img style="POSITION: absolute" src="../../img/do.gif" name=img5>
<br><br>
</BODY></HTML>
使用変数
n | |
y | |
z | |
align | |
charset | |
cnt | |
content | |
cx | |
cy | |
equiv | |
FACE | |
height | |
i | |
iList | |
lang | |
language | |
name | |
onload | |
pixelLeft | |
pixelTop | |
rotZimg -------( Function ) | |
rx | |
ry | |
src | |
style | |
width | |
zIndex |