kurt.grigg７■画像■　スライド苺が踊る

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

■一個の画像がランダムに飛び回るJavaScriptはこちら→　kurt.grigg３■画像■　蝶が舞う

上記のGIFアニメ画像使用のJavaScriptを改造しました。
今回ランダムに浮遊する画像は１個のGIFアニメ画像ではなく、スライドショーをしている複数の静止画像です。
複数の静止画像を高速でスライドさせることでGIFアニメのように見せています。

JavaScriptとは無関係ですが、今回はbodyに２個の背景画像を指定しています。
女の子の画像とウサギの画像です。（こちらの画像は２枚ともGIFアニメ画像です。）
複数の背景画像の指定方法はSTAND4Uから。

■画像がランダムに飛び回るkurt.grigg作成のJavaScript関連コーナーはこちら→　Kurt Grigg・メニュー

<!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>kurt.grigg７■画像■　スライド苺が踊る</title>

<!--★背景指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(is3.gif) 55% 370px no-repeat,
            url(wh12.gif) 40% 150px  no-repeat;
}
--></style>
<!--★背景指定ここまで-->

</head>
<body>

<!--★ここからコピー　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=====================================================================
画像をスライドショーにしてランダム移動　By　Random Movement Script by kurt.grigg@virgin.net　
★古いブラウザ対応分削除。HTML5対応、文章との重ね方追加、画像をスライドショー　2020/03/09
JS保管サイト(消滅)http://www2.tky.3web.ne.jp/~ogura1/
======================================================================*/
(function (){ var i=0;  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var Pic=["bu10.gif","bu11.gif","bu12.gif","bu13.gif","bu14.gif","is4.gif"];  //★苺と蝶の画像指定
var myurl="";       //★画像パス。文書とは別のフォルダーなどに入っている時は指定。同じ時は"";で
var inZ=-1;         //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var spd=10;         //★浮遊速度。原本10。数値が大きいほど遅い
var speed=500;      //★画像のスライドショーの切替速度 1000=1秒

//指定ここまで---------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var load=new Array();   //画像先読み込み。切替をスムーズにする
for (var p=0,len=Pic.length; p<len; p++){load[p]=new Image();load[p].src=myurl+Pic[p];}
function mShow(){ $("pics").src=myurl+Pic[i%len]; i++; setTimeout(mShow,speed);}
document.write("<img src="+myurl+Pic+" id='pics' style='position:fixed; z-index:"+inZ+";'>");//固定指定へ
var R=0,PB=0,RD=0,VB=0,HB=0;
var Y=10,X=10,D=Math.floor(Math.random()*60+10);
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,4,-4];
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve,1800);
}
function MoveRandom(){
var H=window.innerHeight, W=window.innerWidth;
var BY=-(pics.offsetHeight), BX=-(pics.offsetWidth);
PB=D+=RD;
var y=3*Math.sin(PB*Math.PI/180);/*SY=3を数値で*/
var x=5*Math.cos(PB*Math.PI/180);/*SX=5を数値で*/
if (D<0){ D+=360;}
Y+=y; X+=x; VB=180-D; HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}  
if (Y > H+BY) {Y=H+BY;D=HB;}  
if (X < 1) {X=1;D=VB;} 
if (X > W+BX) {X=W+BX;D=VB;} 
$("pics").style.top=Y+"px"; $("pics").style.left=X+"px";
setTimeout(MoveRandom,spd);
}
mShow(); Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

kurt.grigg７■画像■ スライド苺が踊る UP日時 : 2020/03/09

　kurt.grigg７■画像■　スライド苺が踊る　　　　UP日時 : 2020/03/09