jquery 단일 줄 스크롤,대량 다 중 줄 스크롤,텍스트 그림 스크롤 효과 코드
ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} ul>바 이 두 www.baidu.com 우 리 는 www.jb51.net >는 공고 제목 의 세 번 째 줄 입 니 다.이것 은 공고 제목 의 네 번 째 줄 입 니 다.[Ctrl+A 전체 주석:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]2.다 중 스크롤 효과
제목 없 는 문서 //스크롤 플러그 인(function($){$.fn.extend({스크롤:function(opt,callback){//인자 초기 화 if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(),/가 져 오기 줄 높이 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),//매번 굴 러 가 는 줄 수 는 기본적으로 한 화면,즉 부모 용기 높이 speed=opt.speed?parseInt(opt.speed,10):500,/볼 륨 속도,수치 가 클 수록 속도 가 느 립 니 다(밀리초)timer=opt.timer?parseInt(opt.timer,10):3000;//스크롤 시간 간격(밀리초)if(line=0)line=1;var upHeight=0-line*lineH; //스크롤 함수 scrollUp=function(){this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } //마우스 이벤트 귀속this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery); $(document).ready(function(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:1000}); }); 바 이 두 www.baidu.com >우리 www.jb51.net >는 공고 제목 의 세 번 째 줄 는 공고 제목 의 네 번 째 줄 는 공고 제목 의 다섯 번 째 줄 는 공고 제목 의 여섯 번 째 줄 는 공고 제목 의 일곱 번 째 줄 입 니 다.여덟 번 째 줄
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]3.앞으로 의 여러 줄 스크롤 을 제어 할 수 있 습 니 다여러 줄 스크롤 데모:
여러 줄 스크롤 데모:
- 이것 은 공고 제목 의 첫 번 째 줄
- >이것 은 공고 제목 의 두 번 째 줄
- >이것 은 공고 제목 의 세 번 째 줄
- 이것 은 공고 제목 의 네 번 째 줄
- 이것 은 공고 제목 의 다섯 번 째 줄
- 이것 은 공고 제목 의 여섯 번 째 줄
- 이것 은 공고 제목 의 일곱 번 째 줄
- >이것 은 공고 제목 의 여덟 번 째 줄
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
