스크롤을 해서 페이지의 작은 영역에 뉴스(공지사항, 이벤트, 사진 등)를 표시하고, 마우스를 올리면 스크롤을 멈추고 프롬프트를 표시하고, 나간 후에도 스크롤을 계속하는 것이 필요합니다.
렌더링:
유용한 정보 업로드
html:
list-style: none
}
# news{
height: 75px;
overflow: Hidden;
}
핵심은 js 파일입니다:
코드 복사
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는 요소를 직접 이동할 수 있습니다. 그게 전부입니다.