HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법

모바일 장치의 인기와 웹 사이트 액세스 경험에 대한 사용자 요구 사항이 증가함에 따라 반응형 스크롤 알림 표시줄을 디자인하는 것이 점점 더 중요해졌습니다. . 중요한. 반응형 디자인은 웹사이트가 다양한 기기에서 적절하게 표시되고 사용자가 알림 콘텐츠를 쉽게 볼 수 있도록 보장합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 HTML 구조를 만들어야 합니다. HTML 파일에서 ID가 있는 요소를 사용하여 알림 표시줄 콘텐츠를 보관할 수 있습니다. 예:

<div id="scrolling-news">
  <ul>
    <li>通知内容1</li>
    <li>通知内容2</li>
    <li>通知内容3</li>
    <li>通知内容4</li>
    <li>通知内容5</li>
  </ul>
</div>

다음으로 CSS를 사용하여 알림 표시줄의 스타일과 레이아웃을 정의해야 합니다. 다음 스타일을 사용하여 알림 표시줄의 기본 스타일을 만들 수 있습니다.

#scrolling-news {
  height: 40px;
  overflow: hidden;
}

#scrolling-news ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll 10s linear infinite;
}

#scrolling-news li {
  display: inline-block;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

위 코드에서는 알림 표시줄의 높이를 40px로 설정하고 범위를 벗어난 콘텐츠를 숨기기 위해 오버플로 속성을 숨김으로 설정했습니다. position:relative를 사용하여 ul 요소의 위치 지정 방법을 설정하고 목록 스타일을 없음으로 설정하여 기본 목록 스타일을 제거합니다. 또한 변환:translateY()를 사용하여 알림 내용을 위아래로 스크롤하는 스크롤이라는 애니메이션을 정의했습니다.

이제 jQuery를 사용하여 알림 표시줄에 몇 가지 대화형 작업을 추가할 수 있습니다. HTML 파일에 jQuery 라이브러리를 도입한 후 다음 코드를 사용합니다.

$(document).ready(function() {
  var scrollingNews = $('#scrolling-news');
  var newsItems = scrollingNews.find('li');
  var newsIndex = 0;

  function scrollNews() {
    scrollingNews.find('ul').animate({ marginTop: '-40px' }, 400, function() {
      $(this).css({ marginTop: '0' }).find('li:first').appendTo(this);
    });
  }

  setInterval(scrollNews, 3000);
});

위 코드에서는 먼저 jQuery 선택기를 사용하여 알림 표시줄 및 알림 콘텐츠의 요소를 가져옵니다. 그런 다음 알림 내용의 스크롤 효과를 구현하기 위해 scrollNews라는 함수를 정의합니다. 이 함수에서는 jQuery의 animate() 메서드를 사용하여 알림 내용을 위아래로 스크롤하고 스크롤이 완료된 후 첫 번째 알림 항목을 목록 끝으로 이동합니다. 마지막으로 setInterval() 메소드를 사용하여 자동 스크롤 효과를 얻기 위해 정기적으로 scrollNews 함수를 호출합니다.

이제 웹페이지를 열면 반응형 스크롤 알림 표시줄이 표시됩니다. 알림 내용은 특정 속도로 위아래로 스크롤되며, 새 알림이 추가되면 자동으로 스크롤되어 표시됩니다.

HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 쉽게 만들 수 있습니다. 위의 샘플 코드는 기본적인 구현 방법일 뿐이며 필요에 따라 스타일과 레이아웃을 수정하고 더 많은 대화형 기능을 추가할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 HTML, CSS 및 jQuery를 사용하여 반응형 스크롤 알림 표시줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!