2019-12-09
【PCのみ】マウスストーカー
始まりました突然のweb講座です。
マウスを動かすと、動きに合わせていろいろなモノが付いてくるのが
マウスストーカーです。
・・が、やはりここでは映らなく、マウスストーカーが『？』になっていますね。
【※ただしスマホからは見れません】
ハートにしたかったのですが、仕方ないので
⇩⇩参考にしてみてください。
（背景画像はぬか漬けキャラです。）
<!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+"'>♥</span>";} /*★♥が特殊文字ハート*/
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>結構面白いですよ〜。それではまた。
関連記事
