0

ユーザーが画面上の任意の場所をクリックしてドラッグできる赤い div があります。灰色の div は赤い div に対して相対的に配置され、赤い div が移動すると自動的に更新されます。マウス ホイールでスクロールすると、赤い div (およびその後に灰色の div) がウィンドウの中心にある位置からアニメーション化されてから停止します。

これまでのところ、現在の座標、ターゲット座標、距離、角度 (度単位) が得られました。それらはそのままコンソールに記録されています。

私がこれまでに持っているもののプランカー: http://plnkr.co/edit/Oi517Hbat7WgIoOu0oFW

どんな助けでも大歓迎です。

4

2 に答える 2

2

document.body.clientWidth ブラウザ ウィンドウの幅をdocument.body.clientHeight取得し、高さを取得してから div を中央に設定するために使用します。

var mydiv = document.getElementById('mydivid');
mydiv.top = ((parseInt(document.body.clientHeight) / 2) - (parseInt(myDiv.Height) / 2)) +'px';
mydiv.left = ((parseInt(document.body.clientWidth) / 2) - (parseInt(myDiv.Width) / 2)) +'px';

中心に「グライド」させたい場合は、CSS にいくつかの変換スタイルを追加できます。

    div.#mydiv {
    -webkit-transition: all 1.0s ease-in-out;  
    -moz-transition: all 1.0s ease-in-out;  
    -o-transition: all 1.0s ease-in-out;  
    -ms-transition: all 1.0s ease-in-out;  
    transition: all 1.0s ease-in-out;  
}

1 秒の時間枠で中心への移動をアニメーション化します

于 2013-09-16T06:24:44.227 に答える