マウスストーカー６■画像D■　泳ぎたいマウス（実寸）-雛形倶楽部-

■マウスを画面の端に置くと、画像がマウスから離れて踊ります。

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

■画像が連続サイズ変化するJavaScriptはこちら→　マウスストーカー５■画像D■浮きたいマウス -雛形倶楽部-

上記のサイズ変化する画像を、画像実寸表示へ改造しました。
複数画像使用のマウスストーカーの JavaScript で、画面の上下左右の端っこにマウスを置くと、画像がマウスから離れて、画面の中で勝手に踊りだします。
マウスを画面の真ん中に置くと、再びマウスストーカーになります。
改造元の透過指定と違って、こちらの見本の透過指定はランダム指定です。
■2018/10/09：記述ミスなど微修正。

<!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>マウスストーカー６■画像D■　泳ぎたいマウス（実寸）-雛形倶楽部-</title>

<style type="text/css"><!--
body{background:#acf;}/*★背景色指定。不要なら削除*/
--></style>

</head>
<body>

<p style="text-align:center;">■マウスを画面の端に置くと、画像がマウスから離れて踊ります。</p>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==================================================================
泳ぎたいマウスストーカー・画像実寸(Stardust)　BY　http://ayanaotakashun.com/sample/stardust/stardust_d.htm（雛形倶楽部）
★HTML5対応、文字を画像実寸へ変更。ランダム透過指定追加　2018/10/09
====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var num=5;       //★画像の表示数
var imgw=159;    //★使用画像の中の最大横サイズ。単位px
var imgh=83;     //★使用画像の中の最大縦サイズ。単位px
var sc=5;        //★原本6。画像同士の密着度。数値が小さいほど間隔が狭い
var maxOp=1;     //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.8;  //★透過の最小値。ランダム変化です。0.1から1の間で指定。maxOpより同じか小さくする
var spd=20;      //★原本10。速度。数値が小さいほど速い

//指定ここまで============================================================================================
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var xx=0, yy=0, eex=0, eey=0, dx=6, dy=6;
var len=ga.length, opa=[];//追加
document.onmousemove=function (e){xx=e.pageX+30;yy=e.pageY+30;}
var k=1;
var sss="";
for (k=1;k<num+1;k++) {
opa[k]=Math.random()*(maxOp-miniOp)+miniOp;//追加
sss+="<img src="+myurl+ga[(k-1)%len]+" id='ayaobj"+k+"' style='position:absolute;left:-100px; top:-100px; opacity:"+opa[k]+";'>";
}
document.write(sss);
function starstok() {
var lt=window.pageXOffset, tp=window.pageYOffset, w=lt+window.innerWidth-18, h=tp+window.innerHeight-18;
if(xx<lt+50||yy<tp+50||xx>w-50||yy>h-50){
eex=eex+dx;
eey=eey+dy;
if(eex<lt&&dx<0){dx=2+6*Math.random();}
if(eey<tp&&dy<0){dy=2+6*Math.random();}
if(eex>(w-imgw)&&dx>0){dx=-2-6*Math.random();}//★原本10をimgwへ変更
if(eey>(h-imgh)&&dy>0){dy=-2-6*Math.random();}//★原本10をimghへ変更
}else{eex=xx;eey=yy;}
for (k=1;k<num+1;k++) {
var ob=$("ayaobj"+k).style;
var ltlt=parseInt(ob.left);
var tptp=parseInt(ob.top);
ob.left=ltlt+((eex-ltlt)/sc/k)+"px";//原本6。修正
ob.top=tptp+((eey-tptp)/sc/k)+"px";//原本6。修正
}
setTimeout(starstok,spd)
}
starstok();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー６■画像D■ 泳ぎたいマウス（実寸）-雛形倶楽部- 最終修正日 : 2018/10/09

　マウスストーカー６■画像D■　泳ぎたいマウス（実寸）-雛形倶楽部-　　　　最終修正日 : 2018/10/09