文字９■実用■右から左のティッカー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>文字９■実用■右から左のティッカー</title>

<!--★コピーここから-->
<style type="text/css"><!--
#Tbx{
position:relative;/*★基準位置指定。必ずposition:●●;を使用して指定すること*/
margin:30px auto 100px;/*★中央配置(上、左右、下）。お好みで*/
overflow:hidden;/*★必須。Tbx領域からはみ出た分は非表示*/
width: 500px;/*★必須。表示領域の横幅 */
height:40px;/*★必須。表示領域の縦幅 */
line-height:40px;/*★文字列を上下中央配置にする。表示領域の縦幅の数値と同じにします*/
/*★以下の装飾はお好みで*/
border: 1px solid #666;/*★枠線 灰色*/ 
border-radius:12px;/*★角丸指定*/
background:linear-gradient(#e9f,#2ae);/*★表示領域の背景のグラデーション指定。紫色、青色*/
color:#fff;/*★文字色　白色*/
font-weight:bold;/*★太文字指定*/
font-size:16px;/*★文字サイズ指定*/
}

#Tmass div{ padding-left:30px; }/*★文字の表示位置の左からの余白*/
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<br>
<p style="text-align:center;">■文字のマウスオンで、スクロールが停止します</p>

<!--★コピーここから。下の１行が表示領域位置指定。id="Tbx"は必須-->
<div id="Tbx"></div>

<script type="text/javascript"><!--
/*==================================================================================
右から左のティッカー By  HIMAJIN(http://himajin.moo.jp/java/imgch/frame3.html)
★iframe使用の2枚のhtmlを1枚にし、画像を文字に変更、小休止追加　　2016/03/24
====================================================================================*/
(function (){ var n=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var speed=5;         //★原本100。流れる速度。数値が小さいほど速い。
var delay=2000;       //★文字列ごとのスライドの休止時間。1000=1秒

var tx=new Array();   //★文字列の指定。増減可能。１行目だけ全角スペース指定。文字列にタグも使用可能
tx[n++]=['　'];/*★★←１行目だけこのままで。全角スペース指定*/
tx[n++]=['横にスクロールする、ニュースティッカーです。'];
tx[n++]=['表示ボックスの右からスライドインします。'];
tx[n++]=['前のテキストが左に スライドアウトしながら、'];
tx[n++]=['次のテキストが右から スライドインしてきます。'];
tx[n++]=['<span style="color:#ff0;">動く文字 ティッカー 電光掲示板。色も変更できます。</span>'];
tx[n++]=['<a href="http://himajin.moo.jp/java/imgch/frame3.html" target="_new">リンク</a>も貼れます。原本はリンク先のJavaScriptです。'];

//指定はここまで-----------------------------------------------------------
var wh=Tbx.clientWidth;//ティッカーのborderを含まない横幅
tx=tx.concat(tx);//配列を２倍連結。2倍しないと最後が空白になる
var len=tx.length;
var setwh=(wh*len)/2;
var flag_c=1,ps=0;
var sss="<div id='Tmass' style='position:absolute;white-space:nowrap;'>";/*方向転換ができなくなるのでtopやleftの0指定はしない*/
for (var i=0; i<len; ++i) {
sss+="<div style='display:inline-block;box-sizing:border-box;width:"+wh+"px;'>"+tx[i]+"</div>";
}
sss+="</div>";
document.getElementById("Tbx").innerHTML=sss;
Tbx.onmouseover=function (){flag_c=2;}
Tbx.onmouseout=function (){flag_c=1;}
function ticKer(){
if(!flag_c){ if(ps >= 0){ps=-setwh;} ps+=1;}//小休止時に縦幅で割り切るために2を1へ変更
else if(flag_c===1){ if(ps <= -setwh){ps=0;} ps-=1;}//小休止時に縦幅で割り切るために2を1へ変更
Tmass.style.left=ps+"px";
var tm1=setTimeout(ticKer,speed);
if(ps%wh===0){clearTimeout(tm1); setTimeout(ticKer,delay);}
}
ticKer();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
文字９■実用■右から左のティッカー UP日時 : 2016/03/24

　文字９■実用■右から左のティッカー　　　　UP日時 : 2016/03/24
