jQuery는 목록의 자동 순환 스크롤을 구현하고 마우스가 hovering_jquery일 때 스크롤을 중지합니다.

스크롤을 해서 페이지의 작은 영역에 뉴스(공지사항, 이벤트, 사진 등)를 표시하고, 마우스를 올리면 스크롤을 멈추고 프롬프트를 표시하고, 나간 후에도 스크롤을 계속하는 것이 필요합니다.

렌더링:

유용한 정보 업로드
html:

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

• aaaaaaaaaaaaaa


• bbbbbbbbbbbbbbbb
• cccccccccccccccc




• eeeeeeeeeeeeee
• ffffffffffffffff

css:

코드 복사 코드는 다음과 같습니다: ui,li {

list-style: none

}
# news{
height: 75px;
overflow: Hidden;
}


핵심은 js 파일입니다:

코드 복사

코드는 다음과 같습니다. $(function() { var $this = $("#news");

var scrollTimer;

$this.hover( function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($ this);
}).trigger("mouseleave");

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


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