マウスストーカー１６■画像■　画像ハートでハート

●2018/08/27：即時関数で囲んで、グローバル変数を消しました。
小さな画像のハートが大きなハートを形作りながら動くマウスストーカーのJavaScriptです。
原本はHIMAJIN から。
１個の画像指定を複数指定にし、古いブラウザ対応分削除、HTML5対応に改造しました。
画像はランダムに並びます。

■ハートの画像ではなく文字の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>

</head>

<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================
画像ハートでハート★古いブラウザ対応分削除。画像を複数画像に変更　 2018/08/27
原本サイトBy：http://himajin.moo.jp/freejava/heart2img.html (サイト：http://himajin.moo.jp)
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

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

var myurl="";     　//★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var hs=16;          //使用画像の最大縦幅。単位px
var n=20;           //ハートの数
var msec=100;       //追従速度
var wh=10;          //大きなハートの大きさ。原本10
var af=0.5;         //ハートの透過度。0で完全透明なので0は指定しない

//指定ここまで----------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0, xh, yh, mx=[],my=[];
var len=ga.length;//追加

for(i=0;i<n;i++){
var randomGa=myurl+ga[Math.floor(Math.random()*len)];//追加

document.write("<img src="+randomGa+" style='position:absolute;z_index:1;top:0;left:0;opacity:"+af+";'id='Hearts"+i+"'>")};

for (i=0; i<=n; i++) {mx[i]=-100; my[i]=-100; }
document.onmousemove= function (e){mx[0]=e.pageX; my[0]=e.pageY;}
function H_run(){
for (i=n-1; i>=0; i--){
if(i){mx[i] = mx[i-1];my[i] = my[i-1];}
if(i<(n/2)){
xh=mx[i]+wh*i*Math.cos(i*2*3.14/n+3.14/2);
yh=my[i]-wh*i*Math.sin(i*2*3.14/n+3.14/2);
}else{
xh=mx[i]+wh*(n-i)*Math.cos(i*2*3.14/n+3.14/2);
yh=my[i]-wh*(n-i)*Math.sin(i*2*3.14/n+3.14/2);
}
$("Hearts"+i).style.top=-(hs*2)+yh+"px"; $("Hearts"+i).style.left=-10+xh+"px";
}
}
setInterval(H_run,msec);
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１６■画像■ 画像ハートでハート UP日時 : 2018/08/27

　マウスストーカー１６■画像■　画像ハートでハート　　　　UP日時 : 2018/08/27