Berhenti apabila tetikus meluncur ke atas dalam jquery

Meluncur tetikus ke atas untuk berhenti ialah kesan interaktif yang biasa digunakan dalam pembangunan bahagian hadapan, yang boleh memberikan pengguna pengalaman pengendalian yang lebih baik. Dalam mencapai kesan ini, jQuery adalah pilihan yang sangat mudah dan pantas.

Pertama sekali, kita perlu memahami kaedah mengikat peristiwa dalam jQuery. jQuery menyediakan dua kaedah pengikatan peristiwa utama, iaitu kaedah .on() dan .bind(). Perbezaan antara kedua-dua kaedah ini ialah kaedah .on() boleh mengikat elemen yang dijana secara dinamik, manakala kaedah .bind() hanya boleh mengikat elemen yang dijana secara statik.

Kemudian, mari kita ambil kaedah .on() sebagai contoh untuk melihat cara mencapai kesan berhenti apabila tetikus meluncur ke atas.

1. Persediaan

Sebelum memulakan pelaksanaan, kita perlu menyediakan beberapa kod HTML dan CSS asas. Mula-mula, kita perlu mencipta bekas div, kemudian letakkan kandungan yang perlu diluncurkan ke dalam bekas, dan tambahkan beberapa gaya asas pada bekas dan kandungan. Kod khusus adalah seperti berikut:

<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 Untuk mencapai kesan berhenti apabila tetikus meluncur ke atas

Mula-mula, anda perlu mengikat acara slaid masuk dan slaid keluar, dan. kemudian kawal permulaan dan permulaan animasi dalam jeda fungsi panggil balik acara. Kod khusus adalah seperti berikut:

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');
});

Dalam kod di atas, kami menggunakan kaedah setInterval() dan clearInterval() untuk melaksanakan kawalan pemasa bagi kesan penatalan. Apabila tetikus meluncur ke dalam bekas, pemasa dikosongkan dan animasi dijeda apabila tetikus meninggalkan bekas, pemasa dimulakan semula dan animasi diteruskan.

3. Pengoptimuman kesan

Selepas kod di atas selesai, kami boleh membuat beberapa pengoptimuman pada kod untuk menjadikannya lebih mudah dibaca dan boleh digunakan semula.

Pertama sekali, kita boleh merangkum kesan animasi ke dalam fungsi untuk kegunaan semula yang mudah. Kod khusus adalah seperti berikut:

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

Kedua, kita juga boleh menetapkan pembolehubah global untuk pemasa mengawal pemasa dalam kod lain. Kodnya adalah seperti berikut:

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

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

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

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

Dalam kod yang dioptimumkan di atas, kami menetapkan pemasa pembolehubah global, yang akan digunakan dalam kod lain untuk memudahkan pelaksanaan beberapa keperluan khas. Pada masa yang sama, kami merangkum kaedah setTimeout() ke dalam fungsi bernama startRoll() untuk kegunaan semula yang mudah.

Ringkasan

Melalui pelaksanaan kod di atas, kita dapat melihat bahawa ia adalah sangat mudah dan pantas untuk menggunakan jQuery untuk mencapai kesan berhenti apabila tetikus meluncur ke atas. Semasa proses pelaksanaan, kita perlu memahami kaedah mengikat peristiwa dan parameternya dalam jQuery, serta pengetahuan asas seperti penggunaan pemasa. Pada masa yang sama, kami juga boleh meningkatkan kebolehbacaan dan kebolehgunaan semula kod melalui pengoptimuman kod, dan seterusnya meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Berhenti apabila tetikus meluncur ke atas dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!