新JavaScript例文辞典

ページ内容を左右に揺らす (Safariのみ)

説明

ページ内容を左右に揺らすにはdocument.body.style["-webkit-transform"]に"translate(横位置,0%)"を設定しますが、この時に少しずつ横位置を変えるようにします。サンプルではサイン(正弦)を利用しています。setInterval()を使って移動処理を定期的に呼び出します。

サンプルプログラム

var deg = 0; // 角度
var amp = 20;
window.onload = function(){
setInterval("pageMove()", 50);
}
function pageMove(){
document.getElementById("result").innerHTML = "現在の角度 : "+deg;
deg = deg + 2;
deg = deg % 360;
var rad = deg * Math.PI / 180;
var n = Math.sin(rad) * amp;
document.body.style["-webkit-transform"]="translate("+n+"%, 0%)";
}
サンプルを実行
[戻る]