その他　変身２■膨らむフグ-応用（前にサメ）

↑↑フグの前方に変身しない魚達がいる見本。サメとクラゲの2個の画像が変身しない。

●2021/09/23：即時関数で囲んで、グローバル変数を消しました。　

■並んだフグの後ろにサメのいるランダム変身JavaScriptはこちら→　変身１■膨らむフグ-基本（後ろにサメ）

上記のJavaScriptの応用編です。
先頭にいるサメとクラゲは変身せず、後ろに並んだ複数のフグだけがランダムに膨らんだフグに変身します。
上記の基本編の説明をまず読んで下さい。

「id="bs"」の領域の中に、フグ以外に文章も画像も無ければ「afterbegin」を使用しても「beforeend」を使用しても結果は同じです。どちらを使用してもかまいません。
そしてフグ以外に文章も画像もあるが、それらはフグの後ろに表示するのであれば、「afterbegin」を使用します。

この応用編は、フグの前方に文章や画像が有る場合です。
その場合は「beforeend」を使用し、JavaScriptのソースの中で、最初の画像から何個目までは変身しないのかの数値を指定します。
JavaScriptの「変身」に該当するのは「img画像」だけなので、数値の指定では文章の数は計算不要です。

しかし「afterbegin」や「beforeend」の位置指定は文章も含みます。
「変身しない画像はフグの前で、文章はフグの後ろ」の時は、どうするのか？
「id="bs"」を囲む別の「id」を指定して文章だけは「id="bs"」の領域から出したり、tableタグを使用してフグの場所のtdだけ「id="bs"」を指定したり、いろいろ工夫が必要です。

「insertAdjacentHTML」の位置指定の詳しい記述方法はJavaScriptでinsertAdjacentHTMLメソッドを使ってHTML要素を追加する方法から。

■並んだ複数の画像がランダムに変身するJavaScript関連コーナーはこちら→　その他・変身・メニュー

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他　変身２■膨らむフグ-応用（前にサメ）</title>

<!--★ここからコピー-->
<style>
body{background:#eef;}/*★背景色は薄い水色。不要なら削除*/

/*★#bsは必須。フグの表示領域。指定内容はお好みで*/
#bs{
margin:50px 5%;/*★位置とサイズ指定。上下50px、左右5%は全体の90%の横幅*/
padding:20px;/*★表示領域と画像周囲との余白*/
background:#adf;/*★領域の背景色。水色*/
height:150px;/*★領域の縦幅*/
text-align:center;/*★画像は左右の中央寄せ*/
}

/*★タイトル文字指定。影付き。不要なら削除*/
.test1{
font: bold 20px Arial,sans-serif;/*★太字、サイズ、フォント書体を一括指定*/
color: #fff;/*★文字色　白色*/
text-shadow: 5px 5px 5px #888;/*★文字の影指定。灰色のボカシ*/
}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー。フグの表示位置。id="bs"は必須-->

<div id="bs">
<span class="test1">■動くJavaScript■</span><br><!--★←タイトル表示。不要なら削除-->
<span style="background:#fff;color:red;">Let's go！</span><img src="ira31.png"><img src="wan7.gif"><!--★←変身しない画像の見本。見本は2個。何個でも可-->
</div>

<script type="text/javascript"><!--
/*=======================================================================
並んだ画像がランダム変身。並んだ画像の前方に変身しない画像が有る場合。
by 鴈野さんちのホームページ：https://t-karino.sakura.ne.jp/tk/java/java1/senobi.html
画像記述とdocument.imagesを修正  2021/09/23
=========================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var num=8;              //★表示したいフグの画像の数
var Img1= "katu8.gif";	//★縮んだフグの画像名
var Img2= "katu9.gif";	//★膨らんだフグ画像名
var spd=1000;　　　　　 //★変身速度。1000=1秒。小さいほど速い。原本400。
var ex_num=2;           //★変身しないフグの前にある画像の数（見本ではサメとクラゲの2個）

//指定ここまで---------------------------------------------------------------------------
var sss='';
for (var i=0; i<num; i++) {
sss +='<img src='+Img1+'>';
}
document.getElementById("bs").insertAdjacentHTML('beforeend', sss);
var Imgs=bs.getElementsByTagName("img"); //id="bs"領域のimgの総数

var seqNo=ex_num;			 //■修正。膨らんだフグの位置。原本は0
var timerID=num;			 //タイマー番号(フグの数だけ必要)
function start(){timerID=setInterval(timerD,spd);} //ロード完了時のタイマースタート

function timerD(){
Imgs[seqNo].src=Img1;	                     //前回の膨らんだフグを縮んだフグに戻す
seqNo=Math.floor(Math.random()*num+ex_num);  //膨らむ位置を乱数で求める
Imgs[seqNo].src=Img2;	                     //膨らむ位置を膨らんだフグにする
}
start();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

変身２■膨らむフグ-応用（前にサメ） UP日時 : 2021/09/23

　変身２■膨らむフグ-応用（前にサメ）　　　　UP日時 : 2021/09/23