新JavaScript例文辞典

ページ内の画像全てをぐるぐる回転させる (Safariのみ)

説明

ページ内の画像全てをぐるぐる回転させるにはページが読み込まれたらgetElementsByTagName("img")としimgタグだけを取得します。次に取得した画像に対してstyle["-webkit-transform"]に"rotate(角度deg)"を設定します。あとはsetInterval()を使って回転処理を定期的に呼び出します。

サンプルプログラム

var deg = 0; // 回転角度
var imageList;
window.onload = function(){
imageList = document.getElementsByTagName("img");
setInterval("imageRot()", 40);
}
function imageRot(){
deg = deg + 6;
deg = deg % 360;
for (var i=0; i<imageList.length; i++){
imageList[i].style["-webkit-transform"]="rotate("+deg+"deg)";
}
}
サンプルを実行
[戻る]