Javascript Patchworker - 文字がスライドイン

このスクリプトについて
　インフォメーションにあったスクリプトの簡略版です。文字だけでなく一応画像も動きます。

実行例

文字がスライドインします

関連

JS : 連続して文字をスライド
CSS : ポジション関連

対応ブラウザ
WIN IE 4.0～ NN 6.0～　MAC IE 4.0～ NN 6.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文字がスライドイン</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var targetId = "motion"; //対象の要素のID属性を設定
  var moveTime = 10; //動く早さを設定　大きいほど遅い
//------------------------------------------------------
  var id;
  var currentLeft;
function ObjSet (){
  if(document.getElementById){
    //ページの左右の余白の幅を取得
    currentLeft = screen.width - (screen.width - 750) / 2;
    
    //ディスプレイからはみ出るように設定
    currentLeft += 500;
    document.getElementById(targetId).style.left = currentLeft;
    
    id = setInterval( ObjSlide, moveTime );
  }
}
function ObjSlide (){
  //左へ40ピクセルずつ移動
  currentLeft -= 40;
  document.getElementById(targetId).style.left = currentLeft;
  
  //40ピクセル以下になったらストップ
  if( currentLeft <= 40 ) clearInterval(id);
}

window.onload = ObjSet;
//-->
</script>
<style type="text/css">

</style>
</head>
<body>

<center>
<h3 id="motion">文字がスライドインします</h3>
</center>

</body>
</html>

ユーザ設定
　ユーザーが設定する変数は、targetId、moveTimeです。
　targetIdには対象とするオブジェクトのIDを設定してください。またこの値を変更した場合にはCSSのほうにも多少の変更が必要です（インフォメーション参照）
　moveTimeには移動の時間を設定します。数字を小さくするほど速く動きますが、あまり大きい数値を入れると動きがぎこちなくなるため、1～20くらいの間で変更するといいと思います。

　また、CSSの方でwidthとtext-alignを設定しなければなりませんが、widthを設定する意味があるのはサンプルのように<center>などでボックスの中揃えを行っていたり、text-alignで右揃えや中央揃えなどを選択している場合だけで、それ以外の場合はこの部分を消して構いません。

JavaScriptのTOPに戻る　　

TOPに戻る