jqueryでマウスが上にスライドすると停止します

マウスを上にスライドさせて停止することは、フロントエンド開発で一般的に使用されるインタラクティブ効果であり、ユーザーにより良い操作エクスペリエンスを提供できます。この効果を実現するには、jQuery が非常に便利で高速な選択肢になります。

まず、jQuery のイベント バインディング メソッドを理解する必要があります。 jQuery は、.on() メソッドと .bind() メソッドという 2 つの主要なイベント バインディング メソッドを提供します。これら 2 つのメソッドの違いは、.on() メソッドは動的に生成された要素をバインドできるのに対し、.bind() メソッドは静的に生成された要素のみをバインドできることです。

それでは、.on() メソッドを例として、マウスが上にスライドしたときに停止する効果を実現する方法を見てみましょう。

1. 準備

実装を開始する前に、基本的な HTML および CSS コードを準備する必要があります。まず、div コンテナを作成し、次にそのコンテナにスライドする必要があるコンテンツを配置し、コンテナとコンテンツにいくつかの基本スタイルを追加する必要があります。具体的なコードは次のとおりです:

<div class="container">
    <ul class="list">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
</div>

<style>
  .container{
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #ccc;
    position: relative;
  }

  .list{
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .list li{
    height: 20px;
    line-height: 20px;
  }
</style>

2. マウスが上にスライドしたときに停止効果を実現するには、

まず、マウスのスライドイン イベントとスライドアウト イベントをバインドする必要があります。次に、イベント コールバック関数の一時停止でアニメーションの開始と開始を制御します。具体的なコードは次のとおりです。

var timer; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      // 动画完成时，将第一个li元素移到最后
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  $('.container').trigger('mouseleave');
});

上記のコードでは、setInterval() メソッドと clearInterval() メソッドを使用して、スクロール効果のタイマー制御を実装しています。マウスがコンテナ内にスライドすると、タイマーがクリアされてアニメーションが一時停止され、マウスがコンテナから離れると、タイマーが再開され、アニメーションが継続されます。

3. 効果の最適化

上記のコードが完了したら、コードをより読みやすく、再利用しやすくするためにコードにいくつかの最適化を行うことができます。

まず、アニメーション効果を関数にカプセル化し、簡単に再利用できます。具体的なコードは次のとおりです。

function startRoll() {
  timer = setInterval(function(){
    $('.list').animate({
      marginTop: '-20px'
    }, speed, function(){
      $(this).css({marginTop: 0}).find('li:first').appendTo(this);
    });
  }, 2000);
}

次に、タイマーのグローバル変数を設定して、他のコードでタイマーを制御することもできます。コードは次のとおりです。

var timer = null; // 定时器变量
var speed = 30; // 滚动速度

// 当鼠标滑入容器时，动画暂停
$('.container').on('mouseenter', function(){
  clearInterval(timer);
});

// 当鼠标离开容器时，动画继续
$('.container').on('mouseleave', function(){
  startRoll();
});

// 页面加载完成后，自动触发鼠标离开容器事件
$(document).ready(function(){
  startRoll();
});

上記の最適化されたコードでは、グローバル変数タイマーを設定します。これは、いくつかの特別なニーズの実装を容易にするために他のコードで使用されます。同時に、再利用しやすいように、setTimeout() メソッドを startRoll() という名前の関数にカプセル化します。

概要

上記のコード実装を通じて、マウスが上にスライドしたときに停止効果を実現するために jQuery を使用するのが非常に便利で高速であることがわかります。実装プロセスでは、jQuery のイベント バインディング メソッドとそのパラメーター、およびタイマーの使用などの基本的な知識を理解する必要があります。同時に、コードの最適化によりコードの可読性や再利用性も向上し、開発効率をさらに向上させることができます。

以上がjqueryでマウスが上にスライドすると停止しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。