2009年04月24日

流れる文字 電光掲示板 ティッカー

スポンサード リンク

Javascript でスムーズに流れるティッカー
メッセージにマウスを乗せると止まります。

New

サンプルソース

<html>
<head>
<title>javascript 流れる文字,ティッカー</title>
<style type="text/css">
<!--
#msgBx{
position :absolute;
top :1px;
left :1px;
font-size :15px;
padding :5px 0px 0px 10px;
color :navy;
background-color :#eeeeee;
height :25px;
width :800px;
overflow :hidden;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload = scrMsg;
var cnt = 0;
var stpX = 10; //停止座標
var stpTime = 200; //停止時間
var posLeft = 600; //開始座標
var time;
var i = 0; //配列変数

var list = new Array(); //流すメッセージの配列
list[0]="このスクリプトは、流れる文字,ティッカーを実行します。";
list[1]="今回は流れる文字にリンクを付けました。";
list[2]="高速バス 足もとゆったりキラキラ号 東京から全国各地へ運行中";

var url=new Array(); //メッセージに対応したリンク先URL
url[0]="http://javascript123.seesaa.net/article/110681301.html";
url[1]="http://javascript123.seesaa.net/";
url[2]="http://kirakirabus.seesaa.net/";

function scrMsg(){
    document.getElementById('msgBx').innerHTML = msgTxt();
       cnt++;
       if(cnt > stpTime){
     cnt = 0;
    i++;
if(i==list.length){i=0;}
       }
setTimer();
   }

function msgTxt() {
var trg = 'target="_blank"';
var drift = "";
var speed = 15; //テキストの流れる速さ
var posX = posLeft-cnt*speed; //テキストの X座標

  if (posX < stpX){ posX = stpX;}//posX が stpX(停止座標)になったらスクロールを止めます
{drift = '<div style="position:absolute;left:' + posX +'px"><a href="' + url[i] + '" ' + trg + ' onmouseover="javascript:clearTimeout(time)" onmouseout="setTimer()" >' + list[i] + '</a></div>';
return drift;}
    }

function setTimer() {
time = setTimeout("scrMsg()",20);
}

// -->
</script>
</head>
<body>
<nobr>
<div id="msgBx" style="font-size:15px;"></div></nobr>
</body>
</html>

前回のJavascript でスムーズに流れるティッカーに 文字列にリンクと
マウスを乗せる( onmouseover )と止まる、マウスが離れる( onmouseout )と
再び流れる 機能を付けました。貴方のブログの新着商品の紹介などに使えます。

文字 点滅
visibilityプロパティで 文字を点滅
文字がフェードイン,フェードアウトします
メッセージを電光掲示板のように左に流します
文字をタイプライターのように1文字ずつ表示します。
ティッカー 流れる文字



posted by javaScript at 20:14 | 大阪 ☁ | 動く文字 ティッカー 電光掲示板 | このブログの読者になる | 更新情報をチェックする

2008年12月28日

メッセージを電光掲示板のように左に流します

スポンサード リンク

substring()メソッドで文字の取り出す位置を変更します

JavaScript 作成 情報満載 
All About [JavaScript] All About [ホームページ作成]

サンプルソース

<html>
<head>
<title>文字を1文字ずつ左から消去</title>
<script type="text/javascript">
<!--
  var msg = " メッセージを電光掲示板のように左に流します。"; //表示する文字列
  var msec = 150; // 流れる速さ
  var cnt = 0;//最初の文字位置をカウントするカウンタ
      window.onload =houji;
     function houji(){
        var disp = msg.substring(cnt,msg.length);
        document.getElementById("tbox").value = disp;
        cnt ++;
        setTimeout("houji()", msec);
        if(cnt == msg.length){cnt = 0; }
                      }
// -->
</script>
</head>
<body>
<form name="Myform">
<input type="text" size="60" id="tbox">
</form>
</body>
</html>

    構文    文字列.substring(取り出す先頭位置 , 取り出す終了位置)
例えば
msg = "サンプルです"; とすると
msg のすべての文字を得るにはmsg.length で文字の長さを取得します。
この場合は '6' になるので、取り出す終了位置は '6' になります。 
msg.substring(cnt,msg.length);
cnt が '0'  "サンプルです"
cnt が '1'  "ンプルです"
cnt が '2'  "プルです"
    :
    :
    :

この様に 表示される文字が一文字ずつ減っていくので左に流れる様に見えます。

setTimeout("houji()", msec);
関数 'houji()' を 'msec' 間隔で繰り返します。

文字をタイプライターのように1文字ずつ表示します。
指定した範囲内の文字を抜き出します。substring()メソッド
左から指定した文字数を取り出します.
文字列の長さ(文字数)を取り出す。 length プロパティ

posted by javaScript at 14:57 | 大阪 ☀ | 動く文字 ティッカー 電光掲示板 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。