マウスストーカー３■文字■　文字ハートでハート

●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/heart2.html (サイト：http://himajin.moo.jp)
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★ハートの色指定。色を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var cl=["#f0f","#f00","#e0f","#d07","#fff"];
var n=20;           //ハートの数
var msec=100;       //追従速度
var hs=18;          //小さいハートの大きさ。単位px
var wh=10;          //大きなハートの大きさ。原本10
var af=0.5;         //ハートの透過度。原本0.8。0で完全透明なので0は指定しない

/*★↓文字の影指定をCSS形式で記述。見本は赤のボカシ指定。好みで変更可。指定不要ならvar fcss="";で*/
var fcss="text-shadow:0px 0px 10px #f00;";
//指定ここまで----------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0, xh, yh, mx=[],my=[];
var len=cl.length;//追加

var sss='';
for(i=0;i<n;i++){
var randomCl=cl[Math.floor(Math.random()*len)];//追加

sss +="<span style='position:absolute; z_index:1; top:0;left:0;opacity:"+af+"; font-size:"+hs+"px;color:"+randomCl+"; "+fcss+"'id='Hearts"+i+"'>&hearts;</span>";} /*★&hearts;が特殊文字ハート*/
document.write(sss);
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>

マウスストーカー３■文字■ 文字ハートでハート 最新修正 : 2018/08/27

　マウスストーカー３■文字■　文字ハートでハート　　　　最新修正 : 2018/08/27