JSを使ったマルチオブジェクトの動作例を共有-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSを使ったマルチオブジェクトの動作例を共有

小云云

Jan 24, 2018 am 09:02 AM

javascript 共有例

この記事では、JS でマルチオブジェクトの動きを実現する方法を主に紹介し、マルチオブジェクトの動きを実現するための JavaScript の原理と関連する操作テクニックをサンプルの形式で詳しく分析します。必要な友人が参考になれば幸いです。それは誰にとっても役立ちます。

基本的な手順

1. getElementsByTagName を使用して、複数のオブジェクトによって移動される要素を取得します
2. 次に、for ループで要素を走査し、イベントを追加します
3.現在の要素「モーションを実行中」とターゲット値 target の 2 つのパラメータが必要です

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

<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>

ログイン後にコピー

問題:

出入りの速度が比較的速いため、li は元の状態に戻れず、途中で止まってしまいますこれは、すべての li がタイマーを共有しているためです

マウスが最初の li に移動したら、startMove を呼び出して開始します。タイマー; マウスが移動したとき li を削除するときは、li が半分に達したときにタイマーを開始し、次に 2 番目の li に移動します。 liは途中で行き詰まってしまいます。

この問題を解決してください: 各 li に変更を制御するための独自のタイマーを持たせます

liTags[i].timer = null;// 给每个li都添加一个timer

ログイン後にコピー

そして starMove で毎回使用されるタイマーは現在の李自身のものなので、お互いに干渉することはありません。

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

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

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

ログイン後にコピー

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

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

ログイン後にコピー

完全なjsコード

<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>

ログイン後にコピー

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

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

ログイン後にコピー

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7699

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

Quark NetdiskをBaidu Netdiskに共有するにはどうすればよいですか? Mar 14, 2024 pm 04:40 PM

Quark Netdisk と Baidu Netdisk は非常に便利なストレージツールですが、多くのユーザーはこれら 2 つのソフトウェアが相互運用可能かどうかを疑問に思っています。 Quark NetdiskをBaidu Netdiskに共有するにはどうすればよいですか?このサイトでは、QuarkネットワークディスクファイルをBaiduネットワークディスクに保存する方法をユーザーに詳しく紹介します。 Quark Network Disk から Baidu Network Disk にファイルを保存する方法方法 1. Quark Network Disk から Baidu Network Disk にファイルを転送する方法を知りたい場合は、まず Quark Network Disk に保存する必要があるファイルをダウンロードして、次に開きますBaidu Network Disk クライアントを起動し、圧縮ファイルを保存するフォルダーを選択し、ダブルクリックしてフォルダーを開きます。 2. フォルダーを開いたら、ウィンドウ左上の「アップロード」をクリックします。 3. コンピュータ上でアップロードする必要がある圧縮ファイルを見つけ、クリックして選択します。

NetEase Cloud Music を WeChat Moments に共有する方法_NetEase Cloud Music を WeChat Moments に共有するチュートリアル Mar 25, 2024 am 11:41 AM

1. まず、NetEase Cloud Music に入り、ソフトウェアのホームページインターフェイスをクリックして、曲の再生インターフェイスに入ります。 2. 次に、曲の再生インターフェイスで、下の図の赤いボックスに示すように、右上隅にある共有機能ボタンを見つけて、クリックして共有チャンネルを選択し、共有チャンネルで「共有先」オプションをクリックします。下部にある [WeChat Moments] を選択すると、コンテンツを WeChat Moments に共有できます。

Baidu Netdisk で友達とファイルを共有する方法 Mar 25, 2024 pm 06:52 PM

最近、Baidu Netdisk Android クライアントの新しいバージョン 8.0.0 がリリースされ、このバージョンには多くの変更が加えられただけでなく、多くの実用的な機能も追加されました。その中でも最も目を引くのがフォルダー共有機能の強化だ。ユーザーは簡単に友人を招待して仕事や生活で重要なファイルを共有できるようになり、より便利なコラボレーションと共有が実現します。では、友達と共有する必要があるファイルをどのように共有すればよいでしょうか? 以下では、このサイトの編集者が詳しく説明します。 1) Baidu Cloud APP を開き、まずホームページ上の関連フォルダーをクリックして選択し、次にインターフェイスの右上隅にある [...] アイコンをクリックします (以下を参照) 2) 次に、[+] をクリックします。「共有メンバー」欄】を選択し、最後に全てにチェックを入れます

Mango TV メンバーのアカウント共有 2023 Feb 07, 2024 pm 02:27 PM

Mango TV には、さまざまな種類の映画、テレビシリーズ、バラエティ番組などのリソースがあり、ユーザーはそれらを自由に選択して視聴できます。 Mango TV 会員はすべての VIP ドラマを視聴できるだけでなく、ユーザーが楽しくドラマを視聴できるように最高解像度の画質を設定することもできます。以下では、編集者がユーザーが使用できる無料の Mango TV 会員アカウントをいくつか紹介します。急いで見てください。見てください。 Mango TV 最新のメンバーアカウント無料共有 2023: 注: これらは収集された最新のメンバーアカウントです。直接ログインして使用できます。パスワードを自由に変更しないでください。口座番号: 13842025699 パスワード: qds373 口座番号: 15804882888 パスワード: evr6982 口座番号: 13330925667 パスワード: jgqae 口座番号: 1703

Discuz WeChat共有が表示できない問題を解決 Mar 09, 2024 pm 03:39 PM

タイトル: Discuz WeChat の共有が表示されない問題を解決するには、具体的なコード例が必要ですモバイルインターネットの発展に伴い、WeChat は人々の日常生活に欠かせないものになりました。 Web サイト開発では、ユーザーエクスペリエンスを向上させ、Web サイトの露出を拡大するために、多くの Web サイトに WeChat 共有機能が統合され、ユーザーが Web サイトのコンテンツを Moments または WeChat グループに簡単に共有できるようになります。ただし、Discuz などのオープンソースフォーラムシステムを使用すると、WeChat 共有が表示されないという問題が発生し、ユーザーエクスペリエンスに一定の困難が生じることがあります。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

HP プリンタードライバーの 2 つのインストール方法を共有する Mar 13, 2024 pm 05:16 PM

HP プリンターは多くのオフィスで欠かせない印刷機器であり、コンピューターにプリンタードライバーをインストールすると、プリンターが接続できないなどの問題を完全に解決できます。では、HP プリンタードライバーをインストールするにはどうすればよいでしょうか?以下のエディターでは、2 つの HP プリンタードライバーのインストール方法を紹介します。 1 つ目の方法: 公式 Web サイトからドライバーをダウンロードする 1. 検索エンジンで HP 中国公式 Web サイトを検索し、サポート欄で [ソフトウェアとドライバー] を選択します。 2. [プリンター] カテゴリを選択し、検索ボックスにプリンターのモデルを入力し、[送信] をクリックしてプリンタードライバーを見つけます。 3. お使いのコンピューターシステムに応じて対応するプリンターを選択します (win10 の場合は、win10 システム用のドライバーを選択します)。 4. ダウンロードが成功したら、フォルダー内でそれを見つけます

pptを共有する方法 Mar 20, 2024 pm 07:51 PM

多くの企業では、年末の概要であれ業務報告書であれ、PPT の形式で提示することが求められているため、職場の人々は PPT の作成に精通しているでしょう。この時、PPTをどうやって共有するかという問題に遭遇しました。心配しないでください。以下のエディターが PPT を共有する方法を示します。 1. まず編集した PPT を選択し、左上隅にある [保存] をクリックします (WPS を使用している場合は、最初に [ログイン] をクリックできます)。 2. 次に、以下に示すように、メニューバーの共有アイコンをクリックします。 3. 以下のような共有インターフェイスが表示され、共有リンクが表示されるので、クリックして共有リンクを送信します。 4. 下の画像の左下隅にある [友達の編集を許可する] をクリックすると、友達もクリックしてこの PPT を編集できます。 5. 必要に応じて、P を入力します。

See all articles

JSを使ったマルチオブジェクトの動作例を共有

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック