その他　時間２■フェードで時間差表示 idランダム

<!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>その他　時間２■フェードで時間差表示 idランダム</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
background:url(gat120.jpg) no-repeat #db9;/*★少女の背景画像指定。繰り返し無し。背景色薄茶色。お好みで*/
background-size:100% auto;/*★背景画像表示は横幅一杯。縦幅は縦横比率を計算した自動表示。少女の画像実寸は横900px縦300px*/
}

/*★必須。時間差のフェード表示する要素全てのid名を記述。このidはJavaScriptのソースにも記述*/
#test1,#fm1,#fm2,#fm3,#fm4,#setumei,#baraF{
opacity:0;/*★必須。最初は透明*/
transition:opacity 1s ease;/*★必須。フェード変化時間。1sは１秒*/
}

/*★以下は個別のidの装飾。お好みで*/

/*★全部のメニューボタンの領域指定。メニューボタンの位置指定をするため*/
.menuF{
margin-top:100px;/*★上からの位置*/
text-align:right;/*★個別のメニューは右寄せ表示*/
}

/*★個別のメニューボタン指定*/
.menuF a{
display:inline-block;/*★必須。サイズ指定をして右寄せするため*/
margin-right:20px;/*★右からの位置*/
width:150px;/*★１個のボタンの横幅*/
height:40px;/*★１個のボタンの縦幅*/
line-height:40px;/*★行間指定。ボタンの縦幅と同じ数値を入れると文字が上下中央位置指定になる*/
text-align:center;/*★文字の左右中央位置指定*/
background:#fff;/*★ボタンの背景色白色*/
border:3px #8a3 outset;/*★ボタンの枠線。深緑色*/
border-radius:10px;/*★角丸指定*/
text-decoration:none;/*★リンクの下線を消す*/
}
.menuF a:hover{background:#fcc;}/*★メニューボタンをマウスオン時の背景色ピンク*/

/*★説明文指定*/
#setumei{
margin:50px 20%;/*★位置指定(上下、左右)*/
padding:10px;/*★余白*/
border:solid 2px #8a3;/*★枠線　深緑色*/
border-radius:20px;/*★角丸指定*/
background:#fde;/*★背景色ピンク*/
color:#900;/*★文字色　赤茶色*/
text-align:center;/*★文字の左右中央位置指定*/
}

/*★タイトル文字指定*/
#test1{
padding-top:30px;/*★上からの位置*/
text-align:center;/*★文字の左右中央位置指定*/
color:#ccc;/*★文字色灰色*/
font-size:32px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
text-shadow: 2px 2px 2px #f00;/*★影指定赤色。お好みで*/
}
--></style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。時間差フェード表示をする要素に、JavaScriptで指定したそれぞれのidを記述-->

<img src="hya18ss.png" id="baraF" style="position:absolute;top:30px;right:-10px;z-index:-1;"><!--★バラの画像指定-->

<p id="test1">◎動くJavaScript◎</p>

<div class="menuF"><!--★メニュー領域開始-->
<a href="../slide_setumei.html" id="fm1">●スライドショー</a>
<a href="../mouse_setumei.html" id="fm2">●マウスストーカー</a>
<a href="../huruaga_setumei.html" id="fm3">●降る上がる</a>
<a href="../uku_setumei.html" id="fm4">●ふわふわ</a>
</div><!--★メニュー領域終了-->

<div id="setumei">フェードで時間差表示したい要素のidをJavaScriptのソースの中にも記述します。<img src="hya9.png" style="vertical-align: middle;"></div>

<script type="text/javascript"><!--
//フェードで時間差表示 idランダム：2017/06/11====================================================
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★idの指定。増減可能。フェード表示したい要素のid名。表示の順番はランダムです
var idga=[fm1,fm2,fm3,fm4,setumei,test1,baraF];
var delay=1000;   //★何秒おきに表示するか指定。1000=1秒
var wt=500;       //★待機時間。ページが開いてからのフェードの開始を遅らせるかを指定。1000=1秒。0にするとすぐにフェードインが開始

//指定ここまで-----------------------------------------------------------------------------------
function fImg(){
var len=idga.length;
var i=Math.floor(Math.random()*len);//ランダム用
if (typeof idga[i] !=='undefined') {idga[i].style.opacity=1;}//Firefoxのコンソールのヒントより
idga.splice(i,1);//ランダム用。表示済みは重複させない
setTimeout(fImg, delay);}//何秒おきに表示するか
setTimeout(fImg,wt);//最初の開始時間を遅らせる
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
時間２■フェードで時間差表示 idランダム 最終修正日 : 2017/06/11

　時間２■フェードで時間差表示 idランダム　　　　最終修正日 : 2017/06/11
