合体１０-２■フェードのスライド内を複数個別指定浮遊

<!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"><!--
body{background:#db9;}/*★背景色指定。薄茶色。不要なら削除*/

/*★必須。スライド表示位置とサイズと装飾指定。位置とサイズは必須。*/
#wakuP{
overflow:hidden;/*★必須。はみ出した部分を表示しない*/
position:relative;/*★必須。基準位置の指定。relativeでもabsoluteでもfixedでも可*/
margin:50px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:600px;/*★必須。スライド画像の横幅*/
height:450px;/*★必須。スライド画像の縦幅*/
border:ridge 20px #953;/*★濃茶色の枠指定*/
box-shadow:inset 10px 10px 10px #fff;";/*★領域の内側に白色の影指定*/
}

/*★以下はスライド領域の文字の指定。不要なら削除。#wakuPを基準としたposition:absolute;で指定*/
.title{ position:absolute; top:20px; left:20px; color:#f00;font-size:30px; text-shadow:3px 3px 3px #000;}
#wakuP p{ position:absolute; width:100%; bottom:10px; text-align:center; color:#fff; text-shadow:3px 3px 3px #000;}
/*★スライド領域の文字の指定ここまで*/

--></style>
<!--★ここまでコピー。別に、bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから-->

<div id="wakuP"><!--★スライド表示領域開始。id="wakuPは必須"-->

<div id="bsP"></div><!--★スライドショー分。id="bsP"は必須-->

<div class="title">動くJavaScript</div><!--★タイトル分。不要なら削除-->

<p>－welcome－<br>コピーだけで動作する<br>JavaScriptのサンプルを紹介するサイト</p><!--★見本文章分。不要なら削除-->

</div><!--★スライド表示領域終了-->


<!--★JavaScriptは２個あります。上がスライドショー分、下が浮遊する画像分です-->

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードイン・フェードアウトのスライドショー　　　　★2020/05/09　グローバル変数を削除　
By　http://cya.sakura.ne.jp/java/sshow2.htm(新サイト：イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に'●',と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し
var ga=["muka23.jpg","muka24.jpg","muka25.jpg","muka26.jpg","muka27.jpg","muka28.jpg","muka29.jpg"];
var myurl="";        //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。下記のCSS指定のフェード変化時間より長くする
var tran="transition:3s ease-in-out;";//★CSS指定のフェードの変化時間。3sは3秒

//指定ここまで----------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　       //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){ $("GaP1").src=myurl+ga[i]; $("GaP1").style.opacity=1; $("GaP2").style.opacity=0;} //次をセット。フェードイン。フェードアウト
else{ $("GaP2").src=myurl+ga[i]; $("GaP1").style.opacity=0; $("GaP2").style.opacity=1; }  //次をセット。フェードアウト。フェードイン
setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var cs="position:absolute;"+tran+"top:0;left:0;z-index:-1;";
var sss='<img src="" id="GaP1" style="'+cs+'"><img src="" id="GaP2" style="'+cs+'">';
$("bsP").innerHTML=sss;
myChange();
}());//即時関数終了
// --></script>


<script type="text/javascript"><!--
/*==============================================================================
範囲個別指定。画像を不規則に移動させる random ver 1.00  （ぱーぷりんの溜まり場）
Javascript by http://kyoei.arrow.jp/jissai.html 京栄一級建築士事務所
HTML5対応と即時関数変更と範囲指定　★2020/05/09
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
var ugoku=new Array();   // この行は触らないで・・
// *****************************  入力事項  ******************************
// ======= 入力１：画像の種類と流れる範囲
// １～２番目の数字で表示範囲の画面「上」・「左」からの各距離( px )を入力
// ３～４番目の数字で「表示幅」と「表示高さ」( px )を入力
//     「 0 」の場合はそれぞれ、画面右端まで、下端まで表示する
// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）
// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）
// ７番目以降で、出したい画像の種類を必要数だけ入力（0から順に）
//     画像が２つ以上あるときは、反復する度に、画像が変わる。
ugoku[0]=[0,0, 0,0, 35, 50, "sakura6.png"];
ugoku[1]=[0,0, 0,0, 40, 50, "sa2.png"];
ugoku[2]=[0,0, 0,0, 50, 50, "sa4.png"];
ugoku[3]=[100,0, 0,200, 30, 30, "tuto20.png"];//★5枚花びらの桜

// ======= 入力２：動きの調整
var no = 7 ;  // 画面に同時に出す画像数を入力
var hsw=-1 ;  // 途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）。１個表示されるのは、ugoku[0]で指定した画像
var chg=50 ;  // 一秒当たりの描画の切替え回数（初期値 100）。小さいほど動きが速い
// *************************** 入力事項ここまで **************************

//  共通変数・配列の設定
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var off_w, off_h, doc_x, doc_y;
var xza=[], yza=[], img_w=[], img_h=[];
var stx=[], sty=[], xflg =[], yflg =[];
var marg_t=[], marg_l=[], disp_w=[], disp_h=[];
var Gy=[], Gx=[], Gp=[];

//  初期値の設定
var ingN=0, dpsw=1; brSize();
for(var i=0; i<no; i++){
Gy[i]=ingN; Gx[i]=ugoku[ingN].length-1; Gp[i]=6;
var sss="<img src="+ugoku[Gy[i]][Gp[i]]+" id='img"+i+"' style='position:absolute;'>";

document.write(sss);
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
marg_t[i]=ugoku[ingN][0]; marg_l[i]=ugoku[ingN][1];
disp_w[i]=ugoku[ingN][2]; disp_h[i]=ugoku[ingN][3];
if(disp_w[i]===0){ disp_w[i]=doc_x-marg_l[i]; }
if(disp_h[i]===0){ disp_h[i]=doc_y-marg_t[i]; }
primX(i); primY(i);
xza[i]=marg_l[i]+Math.random()*(disp_w[i]-img_w[i]);
yza[i]=marg_t[i]+Math.random()*(disp_h[i]-img_h[i]);
if(ingN==(ugoku.length-1)){ ingN=0 } else{ ingN+=1 } }

// メインルーチン
function Zahyo(){ brSize();
for(i=0; i<no; ++i){
//■下記2行はブラウザIE以外で範囲指定に必須
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
xflg[i]--; yflg[i]--;
xza[i]+=stx[i]; yza[i]+=sty[i]
 if(xflg[i]<=0){ primX(i) }
 if(yflg[i]<=0){ primY(i) }

 if(xza[i]>marg_l[i]+disp_w[i]-img_w[i]){ hen=0;
   stx[i]=-stx[i]; xza[i]=marg_l[i]+disp_w[i]-img_w[i]; kirikae(); }   //右辺
 if( xza[i]<marg_l[i]){ hen=1;
   stx[i]=-stx[i]; xza[i]=marg_l[i]; kirikae(); }                      //左辺
 if(yza[i]>marg_t[i]+disp_h[i]-img_h[i]){ hen=2;
   sty[i]=-sty[i]; yza[i]=marg_t[i]+disp_h[i]-img_h[i]; kirikae(); }   //下辺
 if(yza[i]<marg_t[i]){ hen=3;
   sty[i]=-sty[i]; yza[i]=marg_t[i]; kirikae(); }                      //上辺
$("img"+i).style.left= off_w+xza[i]+"px"; $("img"+i).style.top =off_h+yza[i]+"px";
}
setTimeout(Zahyo,chg); }

// 初期データ発生
function primX(i){
stx[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
xflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

function primY(i){
sty[i]=(1-Math.random()*2)*ugoku[Gy[i]][4]/6;
yflg[i]=Math.floor(1+Math.random()*ugoku[Gy[i]][5]) }

// ブラウザ等のサイズを調べる
function brSize(){
doc_x=wakuP.clientWidth;//■範囲指定の横幅
doc_y=wakuP.clientHeight;//■範囲指定の縦幅
off_w=wakuP.clientLeft+wakuP.offsetLeft;//■範囲指定の左からの位置
off_h=wakuP.clientTop+wakuP.offsetTop;//■範囲指定の上からの位置
}
function Size(i){
img_h[i]=$("img"+i).offsetHeight;
img_w[i]=$("img"+i).offsetWidth;
disp_w[i]=doc_x-img_w[i];
disp_h[i]=doc_y-img_h[i];
}

// 画像を切り替える
function kirikae(){
if (hsw>0 && i===0){
if(dpsw>0){ visi="hidden"; dpsw=-1; } else{ visi="visible"; dpsw=1; }
for(k=1; k<no; k++){ $("img"+k).style.visibility=visi; } }; 
var img_bh=img_h[i], img_bw=img_w[i];
if(hen===0){ xza[i]+=img_bw-img_w[i]; }
if(hen===2){ yza[i]+=img_bh-img_h[i]; } }
Zahyo();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
合体１０-２■Sl+Fl■フェードのスライド内を複数個別指定浮遊 UP日時 : 2020/05/09

　合体１０-２■Sl+Fl■フェードのスライド内を複数個別指定浮遊　　　　UP日時 : 2020/05/09
