jQueryアニメーションのマウスクリックの回転

インターネット技術の継続的な発展に伴い、ページのインタラクション効果はデザイナーが注意を払わなければならない側面になりました。その中でも、アニメーション効果はページ インタラクションに不可欠な部分です。この点で、jQuery アニメーションは最も一般的に使用される手法の 1 つです。この記事では、ケースを使用して、jQuery アニメーションを使用してマウス クリックの回転効果を実現する方法を説明します。

まず、概念を明確にする必要があります。つまり、jQuery は、ページ インタラクション エフェクトをより簡単かつ迅速に完成させるのに役立つ JavaScript ライブラリです。次に、いくつかのコードを準備する必要があります。

HTML 部分:

<div class="box"></div>

CSS 部分:

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

コードを読みやすくするために、CSS でボックス クラスのスタイルを設定できます。その中でもCSS3のtransform属性を利用しており、translate関数によって要素を水平方向と垂直方向の中央に配置することができます。

ここで、jQuery を使用してマウス クリックの回転効果を実現する必要があります。まず、jQuery ライブラリを HTML に導入できます。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

次に、JS 部分で、最初に .box 要素を取得する必要があります。

var box = $('.box');

次に、jQuery のクリック イベントを使用して、ボックス要素のマウス クリック イベントをリッスンします。ユーザーが .box 要素をクリックすると、回転アニメーションをトリガーできます。

box.click(function() {
  box.animate({
    rotation: "+=360deg"
  }, {
    duration: 1000,
    easing: 'linear',
    step: function(now, fx) {
      $(this).css('transform', 'rotate(' + now + 'deg)');
    }
  });
});

上記のコードでは、jQuery の animate 関数を使用して回転アニメーションを作成します。 animate 関数では、回転する角度 (回転: " =360deg") とアニメーションの継続時間 (継続時間: 1000) を設定します。また、イージング オプションを使用してアニメーションのイージング方法を設定します。ここでは線形イージングが使用されます。

アニメーション関数では、ステップ関数も設定します。この関数はフレームごとに 1 回呼び出され、現在のフレームの状態に基づいて要素の CSS プロパティを更新できます。この例では、フレームごとに現在の回転角度に従って .box 要素のtransform属性を更新します。

これで、基本的なマウス クリックの回転エフェクトが完成しました。このコードをローカル ブラウザで実行して、どのように動作するかを確認できます。

概要:

この記事では、jQuery アニメーションを使用してマウス クリックの回転効果を実現する方法を事例を使って説明します。この処理では、jQueryのanimate関数とCSS3のtransform属性を利用しました。この効果は単純ですが、実際の Web デザインでは、ユーザーにより良いインタラクティブ エクスペリエンスをもたらすことができます。

以上がjQueryアニメーションのマウスクリックの回転の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。