マウス軌跡１-２■文字■　マウスから文字続々

<!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:#fdf; }
--></style>
<!--★背景色指定ここまで-->

</head>
<body>

<p style="margin-left:50px;width:30%;background:#fc0;padding:20px;border-radius:20px;">マウス画像は200個表示されたら自動で消えます。</p>
<input type="button" value="もう一度" onClick="location.reload()" style="margin-left:50px;"><!--←★この「もう一度」ボタンの1行は不要なら削除-->

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================
マウスから文字続々(Splash Tracker)　画像を文字に変更。古いブラウザ対応分削除とHTML5対応と文字回転と透過指定　★2018/08/30
　 ■注意：ブラウザChromeとOperaでは10px未満の文字は全部10pxで表示される　
// Splash Tracker  　By Urs Dudli and Peter Gehrig 
// Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com（現在はJavaScript公開無し）
// info@24fun.com   5/17/2002\n
===============================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★文字指定。文字を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し。「&hearts;」は特殊文字ハート
var mj=["●","○","&hearts;","★"];

//★文字の色指定。色を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var cl=["#ff5","#f8f","#afa","#bef","#fff"];

var minSize = 20;  //★１番小さい文字サイズ。上記■注意：参照
var maxSize = 100; //★１番大きい文字サイズ
var n=200;         //★原本100。マウス画像表示数
var still=2;       //★全部表示したら何秒後に消すか
var spd=6;         //★次の画像の出る時間。数値が大きいと画像間隔が広くなる
var del=20;        //★原本20。１個ずつ消える時間
var opa=0.5;        //★画像の透過度。0で完全透明なので0は指定しない
var rota=[-20,20,-45,45,70]; //★画像の回転角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で

/*★↓文字の影指定をCSS形式で記述。見本は灰色の輪郭線。好みで変更可。指定不要ならvar fcss="";で*/
var fcss="text-shadow: 1px 1px 10px #777;";

//指定ここまで----------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var isfinished=false;
var posX, posY, shownext=0, i=0, j=0;
var mlen=mj.length, clen=cl.length, rlen=rota.length;
document.onmousemove=function (e){
if (i<n && isfinished===false){
    if (shownext===0){
    posX=e.pageX; posY=e.pageY;
    var obj=$(i).style;
    obj.visibility="visible"; obj.left=posX+"px"; obj.top=posY+"px";
    i++; shownext++;
    }
    else{ shownext++; if(shownext>spd){shownext=0}}
}
else if(isfinished===false){isfinished=true; i=0; setTimeout(clearimages, still*1000)}
}
//全部表示したら１個ずつ消す
function clearimages(){
if(i<n) {
$(i).style.visibility="hidden";
i++; setTimeout(clearimages ,del);//１個ずつ消える速度
}}
var sss="";
for (j=0;j<n;j++){	
var rndM=mj[Math.floor(Math.random()*mlen)];//■←文字をランダムではなく順番に出す時はこの１行を var rndM=mj[j%mlen]; へ変更
var rndC=cl[Math.floor(Math.random()*clen)];//■←色をランダムではなく順番に出す時はこの１行を var rndC=cl[j%clen]; へ変更
var sz= Math.floor(Math.random()*(maxSize-minSize) + minSize);
var rndR=rota[Math.floor(Math.random()*rlen)];

sss +="<span id='"+j+"' style='position:absolute; top:-1000px;left:-1000px; opacity:"+opa+";  transform:rotate("+rndR+"deg); font-size:"+sz+"px; color:"+rndC+"; "+fcss+"'>"+rndM+"</span>";
}
document.write(sss);
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>
マウス軌跡１-２■文字■ マウスから文字続々 UP日時 : 2018/08/30

　マウス軌跡１-２■文字■　マウスから文字続々　　　　UP日時 : 2018/08/30
