Q&A
（質問文は編集できます）「3px分に設定したい」とはどういうことでしょう。もう少し具体的に行いたい処理について質問文に追記してください。
ボールドテキスト２点質問があります。マウスカーソルに追従させて5s後に元の初期位置に戻す（リロードする）プログラムを作成したいのですが、
リロードの部分でうまく行かない状態です。何が原因でどのようにコードを変更すればうまくいきますでしょうか？
また'translate(' + e.clientX + 'px, ' + e.clientY + 'px)'のコードですが、ここのコードに記載しているpxとはどういう処理を意味しているのでしょうか？
お手数おかけしますが、ご教授いただきたくよろしくお願いします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスストーカのプログラム</title> <style> #stalker { position: fixed; top: 0px; left: 0px; width: 20px; height:20px; background: rgba(255,0,0,0.5); border-radius: 50%; transition: all 0.5s; transition-timing-function: ease-out; /* 変化の度合い示す。*/ } </style> </head> <body> <div id="stalker"></div> <script type="text/javascript"> //マウスストーカー用のdivを取得 const stalker = document.getElementById('stalker'); //マウスに追従させる処理 document.addEventListener('mousemove', function (e) { stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)' }); //タイマーをセット window.addEventListener('load', function () { // ページ表示完了した5秒後にリロード setInterval(stalker, 5000); }); </script> </body> </html>
すいません。まずはtranslateの中でどういう処理をしてるか教えて貰えると助かる次第です。中身の処理がわからってないので、質問文が不適切だったかもしれないです。
回答1件
0
ベストアンサー
まずはtranslateの中でどういう処理をしてるか教えて貰えると助かる次第です。
stalker.style.transformにtranslate(10px, 10px)のような文字列を渡すための処理です。
【translate() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate#Combining_y-axis_and_x-axis_translation
【MouseEvent.clientX - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientX
MouseEvent.clientX は event の起きた点の、クライアント内での X 座標を参照できる読み取り専用の属性です。
あと、setIntervalの第一引数は関数です。要素を初期位置に戻すための関数を渡すように書き換えましょう。
【WindowOrWorkerGlobalScope.setInterval() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval
投稿2020/06/21 02:21
編集2020/06/21 02:24総合スコア69458
返信遅くなり申し訳ないですが、ご回答いただきましてありがとうございました。
あなたの回答
tips
プレビュー
