집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 loop_jquery에 뉴스를 표시하기 위해 목록의 자동 스크롤을 구현합니다.

jQuery는 loop_jquery에 뉴스를 표시하기 위해 목록의 자동 스크롤을 구현합니다.

WBOY원래의: 2016-05-16 16:38:541977검색

뉴스(공지사항, 이벤트, 사진 등)는 페이지의 작은 영역에 원형 스크롤 방식으로 표시되어야 하며 마우스를 올리면 스크롤이 멈추고 프롬프트가 표시되어야 하며 이후에도 스크롤이 계속되어야 합니다. 퇴거.

렌더링:

여기 건조물이 있습니다

html:

코드 복사 코드는 다음과 같습니다.

aaaaaaaaaaaaaaa

bbbbbbbbbbbbbb

cccccccccccccccc

dddddddddddd

eeeeeeeeeeee

ffffffffffffffff

gggggggggggggg

CSS:

코드 복사 코드는 다음과 같습니다.

ui,li {

목록 스타일: 없음;

}

#뉴스{

높이: 75px;

오버플로: 숨김;

}

핵심은 js 파일입니다:

코드 복사 코드는 다음과 같습니다.

$(함수() {
var $this = $("#news");
var 스크롤Timer;
$this.hover(함수() {
ClearInterval(scrollTimer);
}, 함수() {
scrollTimer = setInterval(function() {
스크롤뉴스($this);
}, 2000);
}).trigger("mouseleave");

function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height()
$self.animate({
"marginTop": -lineHeight "px"
}, 600, 함수() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

가장 중요한 것은 hover, setInterval,clearInterval, animate 메소드 및 marginTop 속성(marginLeft, top, left 등)을 이해하고 사용하는 것입니다. 웹 페이지가 초기화되면 목록은 스크롤되지 않으며,appendTo는 요소를 직접 이동할 수 있습니다. 그게 전부입니다.

성명：

이전 기사：jQuery는 데이터를 비동기로로드하고 이벤트 example_jquery를 추가합니다다음 기사：jQuery는 데이터를 비동기로로드하고 이벤트 example_jquery를 추가합니다

jQuery는 loop_jquery에 뉴스를 표시하기 위해 목록의 자동 스크롤을 구현합니다.

관련 기사