Javascript Patchworker - 連続して文字をスライド

このスクリプトについて
文字がスライドインのスクリプトが基になっています。前のスクリプトでは1回のスライドで止まっていましたが、今回は連続して文字列がスライドインします。スライドする文字には、いくつかの種類を用意してそれを交代で表示させるように設定できます。

実行例

関連

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 waitTime = 2000; //待ち時間をミリ秒で設定
  var texts = new Array ("テキスト１",
                         "テキスト２",
                         "テキスト３");
//------------------------------------------------------
  var id;
  var count = 0;
  var currentLeft;
function ObjSet (){
  if(document.getElementById){
    //ページの左右の余白の幅を取得
    currentLeft = screen.width - (screen.width - 750) / 2;
    
    //ディスプレイからはみ出るように設定
    currentLeft += 500;
    document.getElementById(targetId).style.left = currentLeft;
    
    document.getElementById(targetId).innerHTML = texts[count];
    id = setInterval( ObjSlide, moveTime );
  }
}
function ObjSlide (){
  //左へ40ピクセルずつ移動
  currentLeft -= 40;
  document.getElementById(targetId).style.left = currentLeft;
  
  //40ピクセル以下になったらストップ
  if( currentLeft <= 40 ) {
    clearInterval(id);
    count ++;
    if (count >= texts.length) count = 0;
    setTimeout( ObjSet, waitTime );
  }
}

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

</style>
</head>
<body>

</body>
</html>

ユーザ設定
　ここでは文字がスライドインのスクリプトに追加された機能を取り上げて解説したいと思います。
　texts配列には表示するテキストを入力します。テキストは「"　"」で囲い、「,」で区切って何種類ものテキストを用意できます。テキストはHTMLで記述できますので、<a>を使ってリンクを貼ったり、<br>を使って改行などもできます。ただし、テキスト内で「"　"」を用いることはできません。代わりに「' '」を用いてください。
　waitTime変数にはテキストが切り替わる際の待ち時間を設定できます。デフォルトでは2000ミリ秒（＝2秒）に設定されていますので、テキストの長さにあわせて、切り替わるまでに読みきるのに適当な待ち時間を設定してください。

JavaScriptのTOPに戻る　　

TOPに戻る