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

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

렌더링:

여기 건조물이 있습니다

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는 요소를 직접 이동할 수 있습니다. 그게 전부입니다.