ボールをフィールドの中を動かします
importance: 5
クリックに合わせてボールをフィールドの中を動かします。こうやって
要件
- ボールの中央がクリック時にポインターの真下に来る必要があります (可能であればフィールド境界を超えない)。
- CSS アニメーションは歓迎です。
- ボールはフィールド境界を越えないようにします。
- ページがスクロールされたときに、何も壊れてはいけません。
注意事項
- コードは異なるボールとフィールドのサイズでも機能し、固定値に縛られないようにする必要があります。
- クリック座標には
event.clientX/event.clientYプロパティを使用します。
まず、ボールを配置する方法を選択する必要があります。
position:fixed を使用することはできません。ページをスクロールするとボールがフィールドから移動してしまうためです。
だから私たちは position:absolute を使用する必要があります。位置を本当に堅固にするために field 自体を配置します。
そうするとボールはフィールドに対して配置されます
#field {
width: 200px;
height: 150px;
position: relative;
}
#ball {
position: absolute;
left: 0; /* relative to the closest positioned ancestor (field) */
top: 0;
transition: 1s all; /* CSS animation for left/top makes the ball fly */
}次に、正しい ball.style.left/top を割り当てる必要があります。これらは現在、フィールド相対座標を含んでいます。
こちらが画像です
event.clientX/clientY を持っています - クリックのウィンドウ相対座標です。
クリックのフィールド相対の left 座標を取得するには、フィールドの左端と境界線の幅を引きます
let left = event.clientX - fieldCoords.left - field.clientLeft;通常、ball.style.leftは「要素の左端」(ボール)を意味します。だから left を割り当てると、カーソルの中心ではなく、ボールの端がマウスカーソルの下にきます。
ボールを中央にするためには、ボールを半分の幅左に、半分の高さ上に移動する必要があります。
だから最終的な left は次のようになります
let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;垂直座標は、同じロジックを使用して計算されます。
ball.offsetWidthにアクセスする時点ではボールの幅または高さが既知である必要があることに注意してください。HTMLまたはCSSで指定してください。