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文字ずつ表示します。
ティッカー 流れる文字
