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 | 大阪 ☁ | 動く文字 ティッカー 電光掲示板 | このブログの読者になる | 更新情報をチェックする
×

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