マウスストーカー１０■画像■　画像複数で最後起点　

●2016/04/23：即時関数で囲んで、グローバル変数を消しました。
複数の画像が付いてくるマウスストーカーです。
HTML5とブラウザFirefoxでは動作しない複数画像指定のマウスストーカーと、それらには対応しているけど画像指定は１個の残像付きマウスストーカーを、合成して作成しました。
このマウスストーカーは、最後尾が起点となって画像が連なっていきます。そして指定画像の１番最初が一番最後に表示されます。
これより少し前にUPした分は、画像の１番目と２番目が重なってしまうので削除しました。
原本はOpenSpaceとHIMAJINから。

■画像を文字に変更したJavaScriptはこちら→　マウスストーカー２■文字■文字複数で最後起点
■先頭の画像が起点となるJavaScriptはこちら→　マウスストーカー１４■画像■画像複数で先頭起点

■2015/04/13 → 2015/08/31：ソースを少し簡略化

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

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================
マウスに複数画像最後起点 By http://www.openspc2.org/reibun/javascript/mouse/041/index.html(サイト名：OpenSpace)
マウスストーカー（画像）By：http://himajin.moo.jp/freejava/stokerimg.html (サイト：http://himajin.moo.jp)
★古いブラウザ対応分削除と複数画像使用と透過使用　 2016/04/23
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var cnt=12; 　　　　　　//★表示画像数（画像種類より多くても、少なくても可）
var hx=10;              //★マウスと画像の横位置。マイナス指定で左側
var hy=20;              //★マウスと画像の縦位置。マイナス指定で上側
var opa=0.9;            //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var spd=50;  　　　　 //★移動速度　原本100。数値が小さいほど速い

//指定ここまで-----------------------------------------------------------------
var mx=new Array(), my=new Array();
for(i=1;i<=cnt;i++){  
document.write("<img src='"+mos[(i-1)%mos.length]+"' style='position:absolute;top:-100px;left:-100px;opacity:"+opa+";' id='ms"+i+"'>");
}
document.onmousemove=function (e){ mx[cnt]=e.pageX; my[cnt]=e.pageY;}
function trail() {
for (i=1; i<=cnt; i++){
mx[i-1] = mx[i]; my[i-1]=my[i];
document.getElementById("ms"+i).style.top=my[i]+hy+"px";
document.getElementById("ms"+i).style.left=mx[i]+hx+"px";
}}
setInterval(trail,spd);
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

マウスストーカー１０■画像■ 画像複数で最後起点 最終修正日 : 2016/04/23

　マウスストーカー１０■画像■　画像複数で最後起点　　　　最終修正日 : 2016/04/23