2008年12月04日

ティッカー 流れる文字

スポンサード リンク

MARQUEE タグを使うと動きがちょっとギクシャクしますので
Javascript でスムーズに流れるティッカーを作ってみました。
ブログ本体に書くと動作しなかったのでインラインフレームにいれました。

New

サンプルソース

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

<script type="text/javascript">
<!--
window.onload = scrMsg;
var cnt = 0;
var stpX = 10;  //停止座標
var stpTime = 200;  //停止時間
var posLeft = 600;  //開始座標
var i = 0; //配列変数
var list = new Array();  //配列 スクロールさせる文字列
list[0]="このスクリプトは、流れる文字,ティッカーを実行します。";
list[1]="文字のスクロールはMARQUEE を使うと簡単にできるのですが、動きがぎこちない??";
list[2]="このスクリプトでは,スムーズに流れる文字を実現しています。";

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

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

  if (posX < stpX){ posX = stpX;} //スクロール停止
{drift = '<div style="position:absolute;left:' + posX +'">' + list[i] + "</div>";
return drift;}
}
// -->
</script>
</head>
<body>
<nobr><div id="msgBx" style="font-size:15px;"></div></nobr>
</body>
</html>

 ティッカーとは、一定の範囲に文字をスクロールさせて表示させる表示手法のことです。
文字が次々に右方向から左へ流れてゆく電光掲示板を街中でもよく見かけます。
狭い範囲で多くの情報を提供することができるのでよく利用されているのでしょう。
Webページでも、ニュース ティッカー、天気 予報 ティッカー、証券株価ティッカーなど 
左右に文字の流れるティッカー表示がよく用いられています。

ブログやサイトでアフィリエイトをされている皆さん
流れる文字 ティッカーを使って商品の紹介をしてみませんか?
よく関心を引くことができると思います。
でもこのティッカー まだ未完成です。流れる文字列にリンクが張れてません。
次回は文字列にリンクが張れる スクリプトを作ってみたいと思います。



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

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