上干货
html: ">

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

WBOY
풀어 주다: 2016-05-16 17:23:13
원래의
1540명이 탐색했습니다.

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

렌더링:
jQuery는 목록의 자동 순환 스크롤을 구현하고 마우스가 hovering_jquery일 때 스크롤을 중지합니다. jQuery는 목록의 자동 순환 스크롤을 구현하고 마우스가 hovering_jquery일 때 스크롤을 중지합니다.
유용한 정보 업로드
html:

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


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는 요소를 직접 이동할 수 있습니다. 그게 전부입니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿