マウスストーカー２■画像■　画像１個で複数

●2016/04/23：即時関数で囲んで、グローバル変数を消しました。
１個の画像が、複数の残像のようにマウスに付いてきて、止まると１個になるマウスストーカーです。
古いブラウザ対応分を削除し、旧IEブラウザ対応分の透過指定を通常の透過指定に変更しました。原本はHIMAJINから。

■画像の１個指定を複数指定に改造したJavaScriptはこちら　→　マウスストーカー１０■画像■画像複数で最後起点

<!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:#bdf;}/*★背景色指定。水色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================
画像１個で複数マウスストーカー　By：http://himajin.moo.jp/freejava/stokerimg.html (サイト：http://himajin.moo.jp)
★古いブラウザ対応分削除と古い透過指定を変更。 　2016/04/23
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var imgsrc="sun24.png"     //★使用画像
var hn=8;                  //★画像の表示数
var msec=50;               //★追従速度原本100。数値が小さいほど速い
var hx=10;                 //★表示位置 x座標。マウスと画像の横位置
var hy=20;                 //★表示位置 y座標。マウスと画像の縦位置
var opa=0.8;               //★残像の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない

//指定ここまで----------------------------------------
var x=[], y=[];
for(i=0;i<=hn;i++){
document.write("<img src='"+imgsrc+"' style='position:absolute;z-index:2;top:-100px;left:-100px;opacity:"+opa+";' id='Heart"+i+"'>");
}
document.onmousemove =function(e){x[0]=e.pageX; y[0]=e.pageY;}
function H_run(){
for (i=hn; i>=0; i--){
if(i){x[i] = x[i-1];y[i] = y[i-1];}
document.getElementById("Heart"+i).style.top=y[i]+hy+"px";
document.getElementById("Heart"+i).style.left=x[i]+hx+"px";
}}
setInterval(H_run,msec);
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー２■画像■ 画像１個で複数 最終修正日 : 2016/04/23

　マウスストーカー２■画像■　画像１個で複数　　　　最終修正日 : 2016/04/23