ホバー時にアニメーションを一時停止し、マウスが離れるとアニメーションを継続する方法

私はいくつかの解決策にうんざりしましたが、これが私が得た最も近い解決策です。しかし、この結果にはまだ満足していません。マウスが要素から離れると、要素は元の回転に戻ってしまうからです。要素の上に移動すると、マウスが要素から離れた場合でもアニメーションがトリガーされるという考えです。要素の上にマウスを移動すると、アニメーションが再生されて 0 度に留まり、マウスが離れると別のアニメーションが再生され、回転して -8 度に戻ります。 consstelements=document.getElementsByClassName('rota

P粉786800174 2024-04-01 09:43:54 0  1  438

JavaScript - キャンバスデザインのマウス描画機能は、一度のストロークで複数の平行な色付きの線を描画します

1. キャンバスデザインのマウス描画機能は、複数の色の平行線を一度に描画できます 2. マウスイベントに描画 oCg.beginPath(); を追加してみましたが、イベントが上書きされてしまいます。 3. 同じ方法で複製キャンバスを追加しますが、キャンバスは覆われます。

PHP中文网 2017-06-13 09:24:08 0  1  1242

javascript - 奇妙な問題が見つかりました。タブを閉じると、作成した CSS アニメーションが自動的に一時停止されました。

奇妙な問題が見つかりました。私が作成した CSS アニメーションは、タブを閉じると自動的に一時停止し、タブを展開すると再生し続けます。動きの効果を出すために背景画像を動かして使っているのですが、これと関係があるのでしょうか？

给我你的怀抱 2017-06-30 09:52:30 0  1  834

javascript - キャンバスを使用して電子署名を実装し、キャンバス内にマウスの座標を配置します

キャンバスを使用して電子署名を実装しようとすると、キャンバス内のマウスの座標が正確に取得できません。 {コード...} ev.clientYを使用してマウスの座標を取得しますが、canvas.offsetTopは親要素から高さを取得します。そして、キャンバスはスクロールバーのある形式になっているので...

巴扎黑 2017-05-16 13:36:00 0  1  559

マウスが要素上で停止したかどうかを確認するにはどうすればよいでしょうか?

JavaScriptまたはCSSを使用して要素の上にマウスを置くのを止める方法を知りたいです。マウスを要素の上に置くと背景の色が変わるアニメーションを作成しています。また、要素の上にマウスを置くのをやめたときにアニメーションを追加したいと考えています。これどうやってするの？

P粉547420474 2024-03-31 13:28:28 0  1  349

正確なマウス座標を取得できない問題: ページのサイズを変更するときに HTML5 キャンバスを使用する

このピクセル効果をフロントエンドの専門家に作成してもらいたいと考えています。全画面キャンバスでピクセル効果全体を実現することはできますが、 constcanvas=getElementById('canvas');canvas.height=window.innerHeight;//全画面の高さをキャンバスに設定します Canvas.width=window.innerWidth ;//キャンバスを全画面幅に設定すると、マウスの座標を取得しやすくなります constmouse={x:unknown,y:u

P粉752290033 2023-09-12 12:20:33 0  1  730

javascript - JSイベントのバブリングの問題

一件落着: この効果を実現するには CSS を使用します。ご協力いただきありがとうございます。この効果を実現するために CSS の使用に切り替えました。 1. 次のコードでは、a タグのマウスオーバー イベントとマウスアウト イベントをリッスンしてキャンバス アニメーションをトリガーし、マウスオーバーとマウスアウトのコールバックでイベントがバブリングしないようにしましたが、マウスが移動すると...

学习ing 2017-06-12 09:32:56 0  3  808

javascript - キャンバスでのマウス座標の取得に関する問題

ウィンドウ付属のお絵かきボードの線画機能のような線画効果をマウスで作りたいと考えています。これにはマウスの座標を取得する必要があるのですが、キャンバスに線を引くといつもカーソルの下にはっきりと線が引かれず、座標が正確に取得できていない気がします...

过去多啦不再A梦 2017-05-19 10:29:32 0  1  574

javascript - マウスダウンイベントに関する質問

助けてください。$.animate を使用して、ページ要素 mousdown に基づいたイベントを実装しました。実行後、問題が見つかりました。マウスを連続して複数回クリックすると、アニメーションが複数回繰り返し再生されます。希望する効果達成するには、クリックするたびに最初から開始します。アニメーションを再生すると、複数回クリックすると、次のような複数のマウスダウン イベントが生成されます。

世界只因有你 2017-05-19 10:14:34 0  1  411

javascript - h5のcanvasタグを非表示にして再度表示した後に位置が異なるように調整するにはどうすればよいですか?

jsで動的に追加したcanvasタグを利用して線を描画し、特定の位置に絶対配置するようにしました デフォルトでは表示されていますが、製品的には非表示にできることが必須なので、非表示・表示が可能なボタンを作りましたHide() と show() を使用します。なぜ Hide() の後に show() を使用するのか、canvas...

巴扎黑 2017-05-24 11:37:35 0  1  987

Vue トランジションのトランジション遅延を削除するにはどうすればよいですか?

Vue を使用して、マウスを画像の上に置くとテキスト ボックスが上に移動してフェードインするようにアニメーション化しています。アニメーションは正しいですが、開始するまでにわずかな遅延があります。画像をホバーするとテキスト ボックスがスムーズにフェードインし、上に移動し始めるようにしたいと考えています。テキスト ボックスは適切にフェードアウトし、カーソルが離れると下に移動します。テンプレート:`{{バッジ[アイテム].説明}}`、メソッド:{hoverStart(i){this.hoveredIndex=i;}、

P粉757432491 2023-08-17 17:36:49 0  1  487

JavaScript - スクロール イベントでバブリングを防止できないのはなぜですか?

要件は、マウスがページ上のスクロール バーのある要素内にあるときに、本文のスクロールが同時にトリガーされないようにスクロール イベントをトリガーすることです。率直に言うと、マウスが div 内でロールすると、たとえ div が最後までスクロールしても、本文はスクロールしません。バブリングを防ぐために div にスクロールイベントを与えました。このアイデアを活かしたいのですが…

PHP中文网 2017-07-05 11:07:59 0  6  4232

画像の開始点と終了点

画像の開始点と終了点を設定しようとしています。それで、キャンバスと画像があり、画像をキャンバスに配置すると、開始点/終了点の上にマウスを置いたときに小さな赤い円が点灯するようにしたいのですが、これは他の画像を接続して作成できることを意味します。例: 1) 画像をドラッグします。 2) 画像をキャンバスに配置します。 3) マウスを開始点/終了点に移動すると、小さな赤い点が点灯します。ご覧のとおり、赤い点はホバー時にのみ表示されます。もう 1 つの質問ですが、最初の質問を解決できれば、画像がグリル (正方形) に従っていません。これは html/js のコンストレジスタの例です。

P粉511757848 2023-08-31 12:24:51 0  1  558

JavaScript - キャンバスの空の領域を切り取る

Canvas を使用して電子署名を作成しましたが、ユーザーの署名後に空白が多すぎました。空白スペースをキャプチャする方法はありますか?例の元画像: 署名プロセス中に、マウスが通過した領域を取得し、以下に示す赤い領域の座標を取得しました。 次に、それを img オブジェクトに渡し、キャンバス上に描画します。

黄舟 2017-05-16 13:26:16 0  5  1026

JavaScript - 右側のメニューがターゲット位置を正しく見つけることができません。つまり、サブメニューが消えた後もマウスが元の位置に留まります。詳細については、画像を参照してください。

これが私のマウスの現在の場所です。次に、マウスをカルチャー センターに移動したいと思います。下の図では、上のサブメニューが格納される必要があることを示していますが、マウスの位置は格納されず、信用監視メニューにスライドします。カルチャー センターに戻りたい場合は、今すぐクリックすることしかできません。マウスを上に移動します。これはユーザー エクスペリエンスに影響しますが、できるのは...

曾经蜡笔没有小新 2017-05-19 10:28:27 0  1  378

jsでマウスホイールイベントを監視し、現在実行中のメソッドから抜け出す方法についてアドバイスをお願いします。

親愛なる友人へ: jquery の animate メソッドを使用する js コードがあります。このコードの実行中にマウス ホイールの動きを監視する必要があります。マウス ホイールの動きがあった場合は、animate メソッドを終了してください。教えてください。コードの書き方を教えてください。添付ファイル: window.onload = function () { setTimeout(autorollup,3000);

天空翱翔 2021-10-28 09:20:05 0  4  1009

javascript - JS は画像を動的にロードして、画像が画面上にあるかどうかをどのように判断しますか?

マウスを下にスクロールすると、対象領域が画面上に表示されると画像が読み込まれますが、対象領域が画面上に表示されるかどうかはどのように判断すればよいでしょうか。

世界只因有你 2017-05-19 10:20:40 0  2  471

モバイル ブラウザでリンクの title 属性、つまりマウスを置いたときにチップ効果があることを確認するにはどうすればよいですか?

パソコンでは閲覧できますが、携帯電話ではマウスオーバー動作ができないのですが、title属性の効果を高めるjsスクリプトはありますか？

阿卡 2018-10-18 15:37:43 0  3  1404

React を使用した HTML の SVG パス セレクター

ユーザーがSVGをアップロードできるペイントアプリケーションを作成しています。さまざまな色で塗りつぶし、SVG 上に描画してから消去します。しかし、残念ながらSVGのパスを取得できません。以下は SVG 画像です。ホバーした場合、そのホバー パスのパスを取得し、選択した色で塗りつぶしたいだけです。 Canvas パスと SVG パスを試してみました。しかし、運がありません。 Canvas には beginPath メソッドがあり、SVG を描画するために使用します。 <?xmlversion='1.0'encoding='utf-8'?&

P粉566048790 2023-09-01 23:22:48 0  1  572

javascript - マウスが動いていないときに（mousemoveを使用せずに）マウスの位置を取得する方法

マウスが動いていないとき (mousemove なし) にマウスの位置を取得する方法。js または jq ならどれでも大丈夫です。みんなが言ったことは理にかなっています。この問題をあなたと一緒に勉強できることをとてもうれしく思います~マスターを待っています~あるいは、もしかしたらあるかもしれませんこの段階では本当に無理ですよ～

仅有的幸福 2017-07-05 10:55:20 0  6  1071