JSでマルチオブジェクトの動きを実現する方法を詳しく解説

韦小宝
リリース: 2018-01-24 09:55:49
オリジナル
1087 人が閲覧しました

この記事では、JS でマルチオブジェクトの動きを実現する方法を主に紹介し、javascriptマルチオブジェクトの動きを実現するための原理と関連する操作テクニックを詳しく説明します。この記事を参照してください

この記事では、JS でマルチオブジェクトの動きを実現する方法を例を通して分析します。参考として皆さんと共有してください。詳細は次のとおりです:

基本的な手順

1. getElementsByTagName
を介して複数オブジェクトの移動用の要素を取得します。次に、for ループで要素を走査し、追加します。イベント
3. 定義 startMove 関数には、現在の「移動」要素とターゲット値 target の 2 つのパラメーターが必要です

注: 複数オブジェクトのモーションでは、すべてを共有することはできません

問題:

移動速度が比較的速い場合、一部の li は元の状態に戻れず、途中でスタックします。これは、すべての li がタイマーを共有するためです。

マウスが最初の li に到達したとき。 startMove を呼び出してタイマーを開始します。マウスが li を削除すると、li を元の位置に戻すためにタイマーも開始する必要があります。li が半分に達すると、2 番目の li に移動し、タイマーがクリアされます。このとき最初のリは途中で止まってしまいました。

この問題を解決してください:

各 li に変更を制御するための独自のタイマーを持たせます

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步,2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>
ログイン後にコピー
その後、starMove で毎回それを使用します。タイマーはすべて現在の li です。独自のものなので、お互いに干渉しません。

ここでの前のタイマーは

(現在のオブジェクト自身のタイマー) に変更されていますが、ここでは問題ありません。

obj.timer 完全なコードは次のとおりです:

liTags[i].timer = null;// 给每个li都添加一个timer
ログイン後にコピー

いくつかのスタイルを追加します:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
ログイン後にコピー

完全な js コード

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>
ログイン後にコピー

次に例を見てみましょう: マルチオブジェクトの動き - 透明度の変更

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>
ログイン後にコピー

上記はこの内容のすべてですこの記事が皆さんの JavaScript の学習に役立つことを願っています。ヘルプが提供されています。 !

関連する推奨事項:

選択ドロップダウン ボックスへの要素の追加と削除の JavaScript 実装 共有例

JavaScript アルゴリズムの二分探索ツリーのサンプル コード

JavaScript の最長共通部分列について詳しく話す

以上がJSでマルチオブジェクトの動きを実現する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!