マウス軌跡３■画像■　マウスから画像続々ループ

マウス画像は15個表示。マウス停止で消え、動くと再表示されます。

■原本のJavaScript（Kissing trail）はこちら→　マウス軌跡３-１■画像■マウスから画像続々ループ-原本-

マウスから次々に複数種類の画像が出てきて、マウスの軌跡を表示します。
マウスを動かしている間は表示指定数（見本は15個）を超えると古い画像が消えて、常に指定画数の分だけ次々に表示されていきます。
マウスを停止させるとマウス画像は消え、マウスを再び動かすと再びマウス画像が表示されるという、ループ表示になります。

原本のJavaScript名は「Kissing trail」といい、「eval関数」が多用されています。
しかし現在では「eval関数は危険な関数なので使用しない」ようにとMDN等でいわれています。
だから今回は、原本から古いブラウザ対応分削除とeval関数削除、さらに原本は２種類の画像指定だったのを画像複数指定にし、画像回転指定を付けました。
正直に言うと、eval関数使用時の方が動作はスムーズな感じがします。

eval関数削除については、たそがれ日記と迷子の古事記を参考にしました。

■ループしない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:url(ken7.gif)#ccc; }
--></style>
<!--★背景画像、背景色指定ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=========================================================================
マウスから画像続々ループ(Kissing trail)　古いブラウザ対応分削除とeval関数削除と画像複数指定と画像回転指定　★2015/10/02
//Kissing trail- By dij8 (dij8@dij8.com) 　//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script
===========================================================================*/
//★マウス画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の)の前には,(カンマ)無し
var ga=new Array ("ken4.gif","ken5.gif","ken6.gif","ken8.gif");
var n=15;              //★画像の最大表示数  maximum number of images on screen at one time
var Delay=2000 ;       //★画像が消えるまでの時間  1000=1秒 duration images stay on screen (in milliseconds)
var Space=100;        //★次の画像が出る間隔  distance to move mouse b4 next heart appears
var rota=new Array(0,10,-20); //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=new Array(0);で

var i= 0;  //the last image DIV to be displayed (used for timer)
var posX, posY,lastX = 0,lastY = 0;  //Variables used in script
//Collection of functions to get mouse position and place the images
document.onmousemove=function (e){
posX =e.pageX+10; posY =e.pageY;
if (posX>(lastX+Space)||posX<(lastX-Space)||posY>(lastY+Space)||posY<(lastY-Space)){ showKisser(); lastX=posX; lastY=posY;}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(){
if (i >=n) {i= 0}
document.getElementById(i).style.left=posX+"px";
document.getElementById(i).style.top=posY+"px";
document.getElementById(i).style.visibility="visible";
if (parseInt("typeof(Delay"+i+")")=="number"){ parseInt("clearTimeout(Delay"+i+")");}
var data="Delay"+i+"=setTimeout('hideKisser("+i+")',Delay)";
new Function("return"+data)(); i++;
}
//Make the image disappear
function hideKisser(knum){ document.getElementById(knum).style.visibility="hidden";}
for (var k=0;k<n;k++){
var rnd=Math.floor(Math.random()*ga.length);//■←画像をランダムではなく順番に出す時はこの１行を var rnd=k%ga.length; へ変更
var rrd_ro=Math.floor(Math.random()*rota.length);
document.write('<img src="'+ga[rnd]+'" id="'+k+'" style="position:absolute;top:-200px;left:-200px;transform: rotate('+rota[rrd_ro]+'deg);">');
}
// --></script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

マウス軌跡３■画像■ マウスから画像続々ループ UP日時 : 2015/10/02

　マウス軌跡３■画像■　マウスから画像続々ループ　　　　UP日時 : 2015/10/02