マウスストーカー１■文字■　複数色のキラキラ星

●2016/04/23：即時関数で囲んで、グローバル変数を消しました。
原本は「Tinkerbell Magic Sparkle」（ティンカーベルの魔法のキラキラ？）という、きらめく光のマウスストーカーです。
この見本では、キラキラ星の色をお好みの複数色で指定できます。
見本は「赤、ピンク、赤紫」の３色を指定しました。１色指定もできます。
前回掲載分は１個の星の横線と縦線が違う色になりましたが、今回は１個の星が同色になります。
2005年版の原本と2013年版の原本を合成して作成しました。

１色だけ指定できる2005年版の原本はこちらから。
１色指定か虹色指定ができる2013年版の原本はこちらから。
英語サイトの2013年版原本はmf2fm.comから。こちらは白背景です。

内容物無しでもHTML5動作の2013年版改造分はこちら　→　マウスストーカー１-２■文字■虹色のキラキラ星-2013年版改造-

<!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"><!--
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★星の色指定。増減可能。色名を順番に"●",と区切って、いくつでも並べる。最後の ] の前には ,(カンマ) 無し。１色指定も可
var colour=["#f00","#fcc","#f0f"];
var sparkles=50; //★原本50。キラキラ星の数

//指定ここまで-----------------★内容物が無くてもHTML5動作可能へ。複数色指定へ　2016/04/23-----------*/
/****************************
*  Tinkerbell Magic Sparkle *
*(c)2005-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var cNum=0;//■追加。色数のカウント
var x=ox=400;
var y=oy=300;
var swide=window.innerWidth, shigh=window.innerHeight;
var sleft=sdown=0;
var tiny=[], star=[], starv=[], starx=[], stary=[], tinyx=[], tinyy=[], tinyv=[];
window.onload=function() {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left=0;
    rdow.style.top=0;
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  sparkle();
}
function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=colour[cNum%colour.length];cNum++;//■修正
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout(sparkle, 40);
}
function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else { star[i].style.visibility="hidden"; starv[i]=0; return;}
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;//■2013年版追加
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}
function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return;}
  }
  else tiny[i].style.visibility="hidden";
}
document.onmousemove=function (e){ y=e.pageY; x=e.pageX; sdown=window.pageYOffset; sleft=window.pageXOffset;}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
/*■2005年分削除  div.style.backgroundColor=color;*/
  return (div);
}
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１■文字■ 複数色のキラキラ星 最終修正日 : 2016/04/23

　マウスストーカー１■文字■　複数色のキラキラ星　　　　最終修正日 : 2016/04/23