toggle
札幌市東区でマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、MOSなどを学び、行う就労支援事業所です。
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>マウスストーカー3■文字■ 文字ハートでハート</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>

結構面白いですよ〜。それではまた。


関連記事