jquery에서 마우스가 위로 슬라이드되면 중지-프런트엔드 Q&A-php.cn

jquery에서 마우스가 위로 슬라이드되면 중지

WBOY

풀어 주다： 2023-05-12 10:19:36

원래의

573명이 탐색했습니다.

마우스를 위로 밀어서 멈추는 것은 프런트엔드 개발에서 일반적으로 사용되는 대화형 효과로, 사용자에게 더 나은 작동 경험을 제공할 수 있습니다. 이 효과를 얻으려면 jQuery가 매우 편리하고 빠른 선택입니다.

먼저 jQuery의 이벤트 바인딩 방식을 이해해야 합니다. jQuery는 .on() 및 .bind() 메서드라는 두 가지 주요 이벤트 바인딩 메서드를 제공합니다. 이 두 메서드의 차이점은 .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 중국어 웹사이트의 기타 관련 기사를 참조하세요!