Javascript メッセージを左から１文字ずつ表示する ニュースティッカー
String.substring(); setTimeout();
指定した文字列を左から、最初は１文字、次に２文字、３文字、４文字…と抽出して
表示していき、文字列すべてが標示されると 一定時間停止した後、逆に一文字ずつ
減らしながら左にスクロールして行きます。
イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイプライター風文字 ニュースティッカー javascript</title>
<style type="text/css">
#msgBox{
padding-left: 20px; /* 左余白 */
border: 1px solid green; /* ボーダー : 幅,線種,色 */
border-radius: 12px; /* 角丸ボーダー */
background:linear-gradient(white, #eaeaec); /* 色の線形グラデーション */
overflow: hidden; /* はみ出た部分を表示しない */
line-height: 30px; /* 行の高さ */
height: 30px; /* 表示ボックスの高さ */
width: 550px; /* 横幅 */
font-size:16px; font-weight:bold; color:gray;
}
#msgBox a:link{
display:block;
text-decoration:none; color:blue;
}
#msgBox a:hover{
text-decoration:underline; color:#e4007e;
}
</style>
<script>
var newsItem = [ // 表示する["項目"と "URL"],
["タイプライターのように一文字ずつ打ち出し表示。","http://yahoo.co.jp/"],
["文字色や表示スピードなどは自由に変更できます。","http://yahoo.co.jp/"],
["JavaScript スタイルシートサンプル集 o(^-^)o","http://yahoo.co.jp/"],
["Javascript 垂直にスクロール ニュースティッカー","http://yahoo.co.jp/"],
];
var i = 0;
var j;
var txtLen=newsItem.length; // 表示するアイテム(項目)の数 4
var delay=3000; // 次のメッセージに切り替わるまでの静止時間
var typeSpd=30; // 表示速度
window.onload =function(){newsTicker();}
function newsTicker() {
Str = newsItem[i][0]; // 表示する項目, i が 0なら一番目
URL=newsItem[i][1]; // 表示する項目の URL
i = ( i == txtLen-1 ) ? 0 : i+1;// 三項演算子
j = 0;
typeText();
}
function typeText(){ // 一文字ずつ表示
j++;
mBox=document.getElementById("msgBox");
//Str.substring(開始位置,終了位置).link(URL);
mBox.innerHTML =Str.substring(0,j).link(URL);
(j<=Str.length)?setTimeout("typeText()",typeSpd):
setTimeout("delText()",delay);
}
function delText(){ // 一文字ずつ消去
cnt = Str.length; // 項目の文字数
Str=Str.substring(1,cnt);
mBox.innerHTML = Str;
(cnt > 0) ? setTimeout("delText()",typeSpd):
setTimeout("newsTicker()",delay/2);
}
</script>
</head>
<body>
<div id="msgBox"></div>
</body>
</html>三項演算子
変数 = (条件式) ？ (真の場合の処理) ： (偽の場合の処理)
i と txtLen の値が等しくなければ、 i に １を加算していき、等しくなれば i を 0 にします。
i = ( i == txtLen ) ? 0 : i+1; // i =0, の場合i と txtLen の値が等しくなければ、 i に １を加算していき、等しくなれば i を 0 にします。
Str.length
Str.substring(開始位置,終了位置)メソッド
開始位置から終了位置までの文字を抽出します。
開始位置は 0から、終了位置は 1から数えた位置になりますので、ご注意を!!
終了位置を文字数（
指定した範囲内の文字を抜き出します。substring()メソッド
開始位置は 0から、終了位置は 1から数えた位置になりますので、ご注意を!!
Str="タイプライター"; とすると Str.substring(0,3)で、"タイプ"をStr.substring(1,4)で、"イプラ"を 取り出します。これを使い, 開始位置を 0 で終了位置を文字数（
Str.length）まで 1 ずつ増やして, 先頭から一文字ずつ表示していきます。指定した範囲内の文字を抜き出します。substring()メソッド
setTimeout()メソッド
setTimeout("func()",msec) は ミリ秒で指定した遅延時間 (msec) の経過後に指定した処理を行います。
func には処理する関数名を記述します。setTimeoutメソッド , clearTimeoutメソッド
Str.link(URL)メソッド
Str オブジェクトからのハイパーリンクを生成します。
引数 URL にはアンカー タグ <a> のHREF属性に入れる文字列 "URL"を指定します。
これを実行すると次のようなHTMLになります。
JavaScript スタイルシートサンプル集
引数 URL にはアンカー タグ <a> のHREF属性に入れる文字列 "URL"を指定します。
Str = "JavaScript スタイルシートサンプル集";
URL = "http://javascript123.seesaa.net/"
Str.link(URL);これを実行すると次のようなHTMLになります。
<a href = "http://javascript123.seesaa.net/">
JavaScript スタイルシートサンプル集</a> JavaScript スタイルシートサンプル集
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- 下からスライドインする ニュースティッカー
- 流れる文字 電光掲示板 ティッカー
- 文字 点滅
- 文字がフェードイン,フェードアウトします
- 左から指定した文字数を取り出します.
- border-styleプロパティ
- paddingプロパティ ボックスの内側の余白
- marginプロパティ
- text-align プロパティ
- overflow プロパティ
