JQuery 텍스트 틈새 없 는 스크롤 효과 구현 예제 코드(Marquee 플러그 인)
이 jquery 플러그 인 은 jquery 라 이브 러 리 를 기반 으로 다양한 스크롤 효 과 를 실현 할 수 있 으 며 HTML 코드 가 W3C 표준 에 부합 하도록 합 니 다.
사용 방법 은 다음 과 같다.
1.자 바스 크 립 트 를 불 러 옵 니 다.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.marquee.js"></script>
<script type="text/javascript">
$(function(){
$("#marquee").marquee({yScroll: "bottom"});
});
</script>
2.CSS 스타일 을 추가 합 니 다.
ul.marquee {display: block;line-height: 1;position: relative;overflow: hidden;width: 400px; height: 22px; }
ul.marquee li {position: absolute; top: -999em;left: 0;display: block; white-space: nowrap; padding: 3px 5px; text-indent:0.8em;}
3.HTML 코드 는 다음 과 같다.
<ul id="marquee" >
<li><a href="http://www.bloomylife.com/?cat=153" rel="external nofollow" target="_blank"> WEB </a> [2011-10-20]</li>
<li><a href="http://www.bloomylife.com/?cat=154" rel="external nofollow" target="_blank"> </a> [2011-09-20]</li>
<li><a href="http://www.bloomylife.com/?cat=157" rel="external nofollow" target="_blank"> </a> [2011-10-16]</li>
</ul>
이 플러그 인 은 많은 속성 옵션 을 제공 합 니 다.맞 춤 형 외관 과 효 과 를 설정 할 수 있 습 니 다.
{
yScroll: "top" // ( "top" "bottom")
showSpeed: 850 //
scrollSpeed: 12 //
pauseSpeed: 5000 //
pauseOnHover: true //
loop: -1 // (-1 )
fxEasingShow: "swing" //
fxEasingScroll: "linear" //
cssShowing: "marquee-showing" // class //
event handlers
init: null //
beforeshow: null //
show: null //
aftershow: null //
}
jquery.marquee.js 홈 페이지 주소 로 다운로드 가능:http://www.givainc.com/labs/marquee_jquery_plugin.htm이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js 구현 클래스 marquee 수평 순환 스크롤데모 코드: My Marquee Halign /*My Marquee CSS Start*/.mymarquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.