その他　変身１■膨らむフグ-基本（後ろにサメ）

一番最後のサメはJavaScriptとは無関係です。不要なら削除。↑↑

●2021/09/23：即時関数で囲んで、グローバル変数を消しました。
並んだ複数の画像がランダムに変身する面白いJavaScriptです。
見本ではフグがランダムに膨らみます。
原本は鴈（かり）野さんちのホームページのJava Script/DHTML 事例集の「背伸び蛇」から。

原本でbodyに記述してあった画像を、JavaScriptでループ表示に変更。さらに
document.images[seqNo].src= Img1.src;　の「document.images」を修正しました。
「document.images」とは「body」全部に使用された「img画像」を指します。
そのページに「フグ」の画像しかなければいいですが、他にも画像を使用していたら、その画像が「膨らんだフグ」に変身してしまいます。
それを防止するために「id="bs"」を指定した「div」領域の画像だけ「膨らんだフグ」に変身するよう修正しました。

さらに注意が必要なのは、「document.write」や「innerHTML」ではなく「insertAdjacentHTML」を使用する時の、指定方法です。
「insertAdjacentHTML」はどの位置にJavaScriptで指示した要素を挿入するかを指定するメソッドです。
指定方法は４つあります。その中の２つを説明します。
「id="bs"」の領域の中に文章や他の画像（ここではサメ）があった時、「並んだ変身するフグ」をどの位置に表示するかの指定です。

今回使用したのは「afterbegin」です。
これは「id="bs"」の開始のタグ「<div id="bs">」の直後→つまり、領域にある要素（ここではサメ）よりも前の位置
という位置指定になります。

サメより後ろに位置指定をしたいときは「beforeend」を使用します。
これは「id="bs"」の終わりのタグ「</div>」の直前→つまり、領域にある要素（ここではサメ）よりも後ろの位置
になります。

もちろん「id="bs"」の領域の中にフグ以外の画像も文章も無いなら、どちらを使用しても構いません。

■「beforeend」を使用した見本のJavaScriptはこちら→　変身２■膨らむフグ-応用（前にサメ）

「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:100px;/*★領域の縦幅*/
text-align:center;/*★画像は左右の中央寄せ*/
}
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

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

<div id="bs">
<img src="ira31.png"><!--★←この１行は削除。一番最後にいるサメの画像はJavaScriptとは無関係-->
</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 sss='';
for (var i=0; i < num; i++) {
sss +='<img src='+Img1+'>';
}
document.getElementById("bs").insertAdjacentHTML('afterbegin', sss);
var Imgs=bs.getElementsByTagName("img");  //id="bs"領域のimgの総数

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

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

</body>
</html>

変身１■膨らむフグ-基本（後ろにサメ） UP日時 : 2021/09/23

　変身１■膨らむフグ-基本（後ろにサメ）　　　　UP日時 : 2021/09/23