kurt.grigg３■画像■　蝶が舞う

●2016/01/26：即時関数で囲んで、グローバル変数を消しました。
一匹の蝶が、画面を様々な動きで飛び回る『画像１個のランダム移動』の kurt.grigg 名義の JavaScriptです。
古いブラウザ対応分を削除し、HTML5対応にしました。
原本はこちらから。原本は HTML5では動作しません。

前回掲載分との違いは、文章の上にも蝶が飛ぶのか、文章の下に蝶が隠れるのかの指定ができる点です。
この見本は、文章の下に隠れます。
範囲指定をした領域を飛ぶ見本は、■kurt.grigg４■画像■サンタが飛ぶ（範囲指定）から。

<!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>kurt.grigg３■画像■　蝶が舞う</title>

<!--★背景指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(drw1.jpg) no-repeat #fcc;/*★女性の背景画像、繰り返し無し、背景色ピンク指定*/
background-size:100% auto;/*★背景画像横幅100%指定。女性の背景画像の実寸は横800px縦500px*/
}
--></style>
<!--★背景指定ここまで-->

</head>
<body>

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

var Pic="drg2.gif";  //★蝶の画像指定
var inZ=-1;          //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var spd=10;          //★速度。原本10。数値が大きいほど遅い

document.write("<img src='"+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);
}
Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

kurt.grigg３■画像■ 蝶が舞う 最終更新日 : 2016/01/26

　kurt.grigg３■画像■　蝶が舞う　　　　最終更新日 : 2016/01/26