文字７■実用■フェードのティッカーのツートンカラー

<!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"><!--
#Tk,#Tme1,#Tme2,#Tbg,#TB{width:600px;height:40px;}/*★必須。ティッカーの横幅と縦幅*/
#Tme1,#Tme2,#Tbg,#TB{position:absolute;}/*★必須。#Tkを位置の基準にするため*/
#Tbg,#TB{border-radius: 25px 0px;}/*★左上と右下の角丸指定。お好みで*/

/*★必須。ティッカーの位置指定*/
#Tk{
position:relative;/*★必須。ティッカーの位置指定の基準。指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
margin:100px auto;/*★位置指定(上下、左右)*/
}

/*★必須。文字列用の指定*/
#Tme1,#Tme2{
line-height:40px;/*★文字の垂直中央位置。ティッカーの縦幅の数値を入れると中央位置になる*/
text-align:center;/*★文字の水平中央位置*/
font-size:16px;/*★文字サイズ指定*/
color: #fff;/*★文字色　白色*/
font-weight:bold;/*★太字指定*/
transition:0.5s ease;/*★必須。フェード変化時間。0.5sは0.5秒*/
}

/*★必須。背景色用の指定*/
#Tbg{
opacity:0.8;/*★必須。ツートンカラーにするため*/
border: solid 1px #fff;/*★枠白指定。お好みで*/
box-shadow: 5px 5px 5px #888;/*★影指定。お好みで*/
transition:3s ease;/*★必須。フェード変化時間。1sは１秒*/
}

/*★ツートンカラーにするための土台。この上に上記の背景色領域が重なる*/
#TB{
height:30px;/*★必須。ツートンカラーにするため、ティッカーの縦幅よりも小さくする。縦幅の差が薄い色で出る*/
background:#333;/*★薄い灰色→濃い灰色→黒色の中で選択。黒いほどツートンカラーの色の差が大きくなる*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

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

<script type="text/javascript"><!--
/*-============================================================================================
フェード切替ティッカーのツートンカラー　By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
フェード切替のスライドショーを文字列と背景色切替に変更　★2016/03/27
==============================================================================================*/
(function (){var n=0,tm;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★文字列と背景色の同時指定。増減可能。['文字列','背景色']; の２個をこの順番で記述。文字列にタグが使用できますが、リンクは不可です。
//見本の背景色は、赤紫、黄、緑、水色、青紫。お好みで
var mes= new Array;
mes[n++]=['動くJavaScriptのソースは、最新ブラウザで動きます。','#e9d'];
mes[n++]=['ソースのコピペで簡単に使用できます。','#ff7'];
mes[n++]=['このティッカーは、文字と背景色がフェードで切り替わります。','#cd8'];
mes[n++]=['<span style="color:red;">タグを使用して、文字色も変更できます。</span>','#7cf'];
mes[n++]=['タグは使用できますが、残念ながら<span style="color:#ff0;">リンクは指定できません</span>。','#a9c'];

var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

//指定はここまで-----------------------------------------------------------
var len=mes.length;
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　       //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){
Tme1.innerHTML=mes[i][0]; Tbg.style.backgroundColor=mes[i][1];
Tme1.style.opacity=1; Tme2.style.opacity=0;} //次をセット。フェードイン。フェードアウト
else{
Tme2.innerHTML=mes[i][0]; Tbg.style.backgroundColor=mes[i][1];
Tme1.style.opacity=0; Tme2.style.opacity=1;} //次をセット。フェードアウト。フェードイン
tm=setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var sss='<div id="TB"></div><div id="Tbg"></div><div id="Tme1"></div><div id="Tme2"></div>';
document.getElementById('Tk').innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
文字７■実用■フェードのティッカーのツートンカラー UP日時 : 2016/03/27

　文字７■実用■フェードのティッカーのツートンカラー　　　　UP日時 : 2016/03/27
