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

■改造した、「eval関数」の無いJavaScriptはこちら→　マウス軌跡３■画像■マウスから画像続々ループ

マウスを動かすとマウスから次々に画像が出てきてマウスの軌跡を表示し、マウスを停止すると画像が消え、その動作がループする「Kissing trail」という、JavaScriptの原本です。
この原本のJavaScriptは、ソースのみ記載しています。
原本に多用されている「eval関数」は、危険な関数ということなので、動作させていません。
ソースは２つあります。上のソースは原本です。
下のソースは改造途中のものです。３ヶ所「eval関数」が残っています。

実は、「eval関数」を全部削除するより、こちらの方が動作はスムーズなのです。
またいつか改造する時の参考用に残しておきます。
原本の動作を見たい方は、英語サイトの Dynamic Drive をご覧下さい。

■原本のソース■　

<!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">
<!--
.kisser {
position:absolute;
z-index: 1000;
top:0;
left:0;
visibility:hidden;
}
-->
</style>

<script type="text/javascript">
<!-- cloak
//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script

kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed★１番目の画像指定
theimage2 = "small_heart.gif" //the 2nd image to be displayed★２番目の画像指定

//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
  posX = getMouseXPos(e)
  posY = getMouseYPos(e)
  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
    showKisser(posX,posY)
    lastX = posX
    lastY = posY
  }
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageX+10)
  } else {
    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
  }
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
  if (document.layers||ns6) {
    return parseInt(e.pageY)
  } else {
    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
  }
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
  if (curKisser >= kisserCount) {curKisser = 0}
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK).left =  processedx + 'px'
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK).top = y + 'px'
  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
    eval("clearTimeout(kissDelay" + curKisser + ")")
  }
  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
  curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
  document.captureEvents(Event.MOUSEMOVE)
  document.onMouseMove = doKisser
} else {
  document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</script>
<!--★コピーここまで。bodyにもコピーがあります-->

</head> 
<body>
<!--★コピーここから-->
<script type="text/javascript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')
}
}
// decloak -->
</script>
<!--★コピーここまで-->

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

■evalが３ヶ所あるソース■　

<!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";

/*★★★ここからの３個のevalを残すと動きはスムーズ*/
if (eval("typeof(Delay"+i+")")=="number"){ eval("clearTimeout(Delay"+i+")");}
eval("Delay"+i+"=setTimeout('hideKisser("+i+")',Delay)");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