ぱーぷりん１■全面一括■　画像が踊る

●2017/07/15：即時関数で囲んで、グローバル変数を消しました。
全画面をランダムに複数の画像が移動するJavaScriptです。
「ぱーぷりん」のJavaScriptの特徴は、ふわふわ動く画像の１個１個に、個別に動作の指定と表示位置指定ができる点です。
ただしランダムに動作させる場合、画像の個別指定が逆に面倒な場合もあります。なので、JavaScriptを４個用意しました。
詳細は『ふわふわ』コーナーの◆ぱーぷりん・メニュー◆をお読み下さい。

この見本は、画像を個別に指定はせず、全画面を画像がランダムに移動します。
さらにこの見本では、「ぱーぷりん」の特徴の一つである、画像の複数表示を、途中で１個表示に変更するかの設定もしてあります。
この設定は、「しない」設定にすることも可能です。

原本は京栄一級建築士事務所の■画像を不規則に移動させる使用例：羊の牧場から。

■複数の文字が不規則に移動する全面一括指定のJavaScriptはこちら→　ぱーぷりん２■全面一括■文字が踊る

<!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:url(fp10.png) repeat-x #017aaa;}/*背景上端横並び指定。背景画像は横267px縦200px。不要なら削除*/
--></style>

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==============================================================================
全面一括指定。画像を不規則に移動させる random ver 1.00  （ぱーぷりんの溜まり場）
Javascript by http://kyoei.arrow.jp/jissai.html 京栄一級建築士事務所
画像の個別指定を一括指定へ変更　★2017/07/15
=================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像指定。増減可能。画像を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var ugoku=["msk1.png","msk2.png","msk3.png"];
var myurl="";  //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var inZ=1;     //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var no=9 ;  　 //★画面に同時に出す画像数を入力    
var hsw=1 ;  　//★途中で流れる画像を１個だけするか？（ yes=1 , no=-1 ）
var chg=50 ;   //★一秒当たりの描画の切替え回数（初期値 100）。数値を小さくすると速度が速くなる

//指定ここまで---------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ugoku.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ugoku[p];}
//共通変数・配列の設定
var xza=[], yza=[], img_w=[], img_h=[], stx=[], sty=[], xflg=[], yflg=[], disp_w=[], disp_h=[];
var doc_x=window.innerWidth-18;
var doc_y=window.innerHeight-18;

//  初期値の設定
var i=0, dpsw=1, hen;
for(i=0; i<no; i++){
var sss="<img src="+myurl+ugoku[i%len]+" id='img"+i+"' style='position:fixed; z-index:"+inZ+";'>";//■positionをabsoluteからfixedへ
document.write(sss);
Size(i); primX(i); primY(i);
xza[i]=Math.random()*disp_w[i];
yza[i]=Math.random()*disp_h[i];
}

// メインルーチン
function Zahyo(){
for(i=0; i<no; ++i){ Size(i); 
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]>disp_w[i]){ hen=0;stx[i]=-stx[i]; xza[i]=disp_w[i]; kirikae(); }//右辺
if( xza[i]<0){ hen=1;stx[i]=-stx[i]; xza[i]=0; kirikae(); }               //左辺
if(yza[i]>disp_h[i]){ hen=2;sty[i]=-sty[i]; yza[i]=disp_h[i]; kirikae(); }//下辺
if(yza[i]<0){ hen=3;sty[i]=-sty[i]; yza[i]=0; kirikae(); }                //上辺
$("img"+i).style.left=xza[i]+"px";//■原本off_w+xza[i]
$("img"+i).style.top =yza[i]+"px";//■原本off_h+yza[i]
}
setTimeout(Zahyo,chg); }

// 初期データ発生
function primX(i){
stx[i]=(1-Math.random()*2)*50/6;// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）50へ
xflg[i]=Math.floor(1+Math.random()*60) }// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）60へ

function primY(i){
sty[i]=(1-Math.random()*2)*50/6;// ５番目の数字で、移動の方向の最大速さを入力（大きい程速い 目安値 50）50へ
yflg[i]=Math.floor(1+Math.random()*60) }// ６番目の数字で、同じ変化を繰り返す、最大回数（目安値 50）60へ

// ブラウザ等のサイズを調べる
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(var 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>

ぱーぷりん１■全面一括■ 画像が踊る UP日時 : 2017/07/15

　ぱーぷりん１■全面一括■　画像が踊る　　　　UP日時 : 2017/07/15