Javascript がどのようにして均一な motion_javascript スキルを実現するかについての簡単な説明-jsチュートリアル-php.cn

JavaScript のスポーツは Web サイトでよく使用されます。今回はモーションの基本的な応用例をいくつか紹介したいと思います。 開発中に誰でも直接使用できるので便利です。

コードはシンプルで理解しやすく、初心者に適しています。最後に、自分の動きの枠組みを少しずつ整理していきます。

アプリケーションケースのレンダリング:

共有上にマウスを移動すると、左側の div が表示されます。外すと元に戻ります。誰もがこれを使用すると思います。コードがどのように実装されているかを見てみましょう。

コードをコピーします コードは次のとおりです: #div1 { 幅: 150px; 高さ：200px; 背景: 緑; 位置: 絶対; 左: -150px; } #div1 スパン { 位置: 絶対; 幅: 20px; 高さ: 60px; line-height: 20px; 背景: 青; 右: -20px; 上: 70px; }

コードをコピーします コードは次のとおりです: に共有

以下は Javascript コードです

コードをコピー

コードは次のとおりです: window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-150); }; } var time=null; 関数 startMove(iTraget){ var oDiv=document.getElementById("div1"); clearInterval(時間); time=setInterval(function(){ varspeed=0; if(oDiv.offsetLeft>iTraget){ 速度=-10; }その他{ 速度=10; } if(oDiv.offsetLeft==iTraget){ clearInterval(時間); }その他{ oDiv.style.left=oDiv.offsetLeft 速度 'px'; } },30); } もの:

スタイルの左は初期値が-150なのでdivが内側に縮み、0にすると表示されます。 次に、この値を変更するだけです

startMove のパラメーター iTarget はターゲット ポイントであり、どのターゲット ポイントで停止するかを示します。

速度の大きさを制御して、移動速度を制御します。目標点に到達したらタイマーを停止します。

ルール:

* 仮定

* left:30 iTarget:300 右に行くほどプラスであることがわかります * left:600 iTarget:50 左に行くとマイナスになることが判明 * * 左の現在位置と目標点 iTarget

の関係から正負の速度を推定します 注: 共有に移動するたびにタイマーがオンになるため、最初にタイマーをオフにする必要があります。オンにすると、複数のタイマーが同時に実行されるため、処理が速くなります。

そのため、毎回タイマーが機能することを確認してください。

原則に従います: 関数の機能は同じであり、パラメーターが少ないほど良いため、上記のルールに従って、速度はパラメーターとして渡されません。

人生の例を挙げると、タクシーに乗るとき、100ヤードの速度でタクシーの運転手に行き先を伝えることは一般的に不可能です。タクシーに乗るとき、運転手にどれくらいの速度で行きたいかを伝えることはできません

プログラムは同じですが、ここでは速度パラメータが削除されています。

もちろん、現在のスポーツの枠組みにはまだ多くの問題があり、将来的には解決されるでしょう。次の記事では、等速運動を止める方法について説明します。