マウスについてくる動くボタン
今回はJavaScriptとCSSを使ってマウスについてきてクリックするとウインドウを閉じるボタンを作りたいと思います
コード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>sub</title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" defer></script>
</head>
<!-- 背景を灰色に変更 -->
<body style="background:#D0D7D0;">
<!-- ボタンの設定 -->
<input id="move" onclick="window.close()" type="button" style="position: fixed;width:70px; height:70px; border-radius:100%; left:100px; top:100px;" />
<script>
//現在のボタンのXY座標
var mX;
var mY;
//ボタンが移動した後の座標
var bmX = 0;
var bmY = 0;
//動く速度
var speed =10;
//マウスを動かすとイベントが動く
window.onmousemove = handleMouseMove;
function handleMouseMove(event){
//マウスの座標を取得
mX = event.clientX -35;
mY = event.clientY -35;
//ボタンの移動の計算
bmX = (mX-bmX)/(Math.abs(mY-bmY)+Math.abs(mX-bmX))*speed+bmX;
bmY = (mY-bmY)/(Math.abs(mY-bmY)+Math.abs(mX-bmX))*speed+bmY;
//座標の更新
$("#move").css('left',bmX);
$("#move").css('top',bmY);
}
</script>
</body>
</html>
コードの説明
<input id="move" onclick="window.close()" type="button" style="position: fixed;width:70px; height:70px; border-radius:100%; left:100px; top:100px;" />
onclick="window.close()でこのボタンをクリックしたらウインドウを閉じる
position: fixed;でボタンの配置の設定
width:70px; height:70px;でボタンの大きさ
border-radius:100%; でボタンの形を〇に変える
left:100px; top:100px;でボタンの初期座標
id="move"
後で座標を変更するために名前を付ける
window.onmousemove = handleMouseMove;
function handleMouseMove(event){
//中身
}
マウスが動いたときに中身のコードが動く
mX = event.clientX -35;
mY = event.clientY -35;
ボタンの中心とマウスが重なるようにしたいのでボタンの大きさの半分を引いている
bmX = (mX-bmX)/(Math.abs(mY-bmY)+Math.abs(mX-bmX))*speed+bmX;
bmY = (mY-bmY)/(Math.abs(mY-bmY)+Math.abs(mX-bmX))*speed+bmY;
移動の計算
$("#move").css('left',bmX);
$("#move").css('top',bmY);
idがmoveの座標を変更
動作
参考サイト
マウスポインタの位置、座標を取得する - JavaScript プログラミング
https://www.ipentec.com/document/javascript-get-pointer-position
ツイッターでシェア
みんなに共有、忘れないようにメモ
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？
コメント