マウス軌跡１■画像■　マウスから画像続々

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

■原本のJavaScript（Splash Tracker）はこちら→　マウス軌跡１-１■画像■マウスから画像続々-原本-HTML5

マウスから次々に複数種類の画像が出てきて、マウスの軌跡を表示し、指定表示数（見本は200個）になると、マウス画像が消えていくマウスストーカーです。
飛沫が跳ねて画面が見えなくなるような動作なので、原本のJavaScript名は「Splash Tracker」といい、原本はHTML5では動作しません。
古いブラウザ対応分を削除して、HTML5対応にし、画像に回転指定と透過指定を入れました。

■画像ではなく文字のJavaScript（Splash Tracker）はこちら→　マウス軌跡１-２■文字■マウスから文字続々

<!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:#000; }
--></style>
<!--★背景色指定ここまで-->

</head>
<body>
<p style="margin-left:50px;width:30%;background:#fc0;padding:20px;border-radius:20px;">マウス画像は200個表示されたら自動で消えます。</p>
<input type="button" value="もう一度" onClick="location.reload()" style="margin-left:50px;"><!--←★この「もう一度」ボタンの1行は不要なら削除-->

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================
マウスから画像続々(Splash Tracker)　古いブラウザ対応分削除とHTML5対応と画像回転と透過指定　★2018/08/30
// Splash Tracker  　By Urs Dudli and Peter Gehrig 
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com（現在はJavaScript公開無し）
// info@24fun.com   5/17/2002\n
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★マウス画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var ga=["mo3.gif","mo4.gif","mo5.gif"];

var myurl="";   //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var n=200;      //★原本100。マウス画像表示数
var still=2;    //★全部表示したら何秒後に消すか
var spd=6;      //★次の画像の出る時間。数値が大きいと画像間隔が広くなる
var del=20;     //★原本20。１個ずつ消える時間
var opa=0.7;    //★画像の透過度。0で完全透明なので0は指定しない
var rota=[-20,20,-45,45,90]; //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で

//指定ここまで----------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var isfinished=false;
var posX, posY, shownext=0, i=0, j=0;
var glen=ga.length, rlen=rota.length;
document.onmousemove=function (e){
if (i<n && isfinished===false){
    if (shownext===0){
    posX=e.pageX; posY=e.pageY;
    var obj=$(i).style;
    obj.visibility="visible"; obj.left=posX+"px"; obj.top=posY+"px";
    i++; shownext++;
    }
    else{ shownext++; if(shownext>spd){shownext=0}}
}
else if(isfinished===false){isfinished=true; i=0; setTimeout(clearimages, still*1000)}
}
//全部表示したら１個ずつ消す
function clearimages(){
if(i<n) {
$(i).style.visibility="hidden";
i++; setTimeout(clearimages ,del);//１個ずつ消える速度
}}
var sss="";
for (j=0;j<n;j++){	
var rndG=ga[Math.floor(Math.random()*glen)];//■←画像をランダムではなく順番に出す時はこの１行を var rndG=ga[j%glen]; へ変更
var rndR=rota[Math.floor(Math.random()*rlen)];
sss +="<img src="+myurl+rndG+" id='"+j+"' style='position:absolute;top:-100px;left:-100px; opacity:"+opa+"; transform:rotate("+rndR+"deg);'>";
}
document.write(sss);
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

マウス軌跡１■画像■ マウスから画像続々 最新修正 : 2018/08/30

　マウス軌跡１■画像■　マウスから画像続々　　　　最新修正 : 2018/08/30