jQuery 중단 없는 스크롤 효과(텍스트/그림/세로 스크롤을 지원하는 Baidu News 시뮬레이션)_jquery

WBOY

풀어 주다： 2016-05-16 17:42:10

원래의

1326명이 탐색했습니다.

1. jQuery.roll 플러그인 사용 지침
jQuery.roll은 Baidu News의 중단 없는 스크롤 효과를 시뮬레이션하고 텍스트와 그림의 가로 및 세로 스크롤을 지원합니다. :

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

 
/* 
* @module jQuery 롤 
* @param: contentCls 콘텐츠 컨테이너 클래스 이름 
* @param: contentParentId 콘텐츠 컨테이너 상위 요소 노드 ID 
* @param: 구성 구성 매개변수 
* 
* @config: 효과 스크롤 효과 
* @config: 스크롤 기간 1픽셀의 실행 시간(밀리초) 
* @config: 지연 스크롤 시작 지연 시간(밀리초) 
* 
*/ 
jQuery.roll( contentCls, contentParentId, configs) 

2. 함수 소스 코드

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

 
jQuery.extend({ 
roll: function(contentCls, contentParentId, configs){ 
var setTimeID, totalWidth = 0, totalHeight = 0 , 
firstContent, secondContent, 내용; 
(function(){ 
var SingleContent, cloneContent, nodeList; 
singleContent = $(contentCls, contentParentId); 
nodeList = SingleContent.children() ; 
if (configs.eff == = 'scrollX') { 
$.each(nodeList, function(idx, itm) { 
totalWidth = $(itm).outerWidth(true); 
}); 
singleContent.css( { 'width': totalWidth 'px' }) 
} 
else if (configs.eff === 'scrollY') { 
$.each (nodeList, function(idx, itm) { 
totalHeight = $(itm).outerHeight(true); 
}) 
singleContent.css({ 'height': totalHeight 'px' }); 
} 
cloneContent = SingleContent.clone(); 
cloneContent.appendTo(contentParentId); 
contents = $(contentCls, contentParentId) 
 secondContent = 내용[1]; 
if (configs.eff === 'scrollX') { 
$(firstContent).css({ 'left': 0 }); css({ 'left': totalWidth 'px' }); 
} 
else if (configs.eff === 'scrollY') { 
$(firstContent).css({ 'top': 0 }); 
$(secondContent) .css({ 'top': totalHeight 'px' }) 
} 
})() 
function cssAnimate(){ 
if ( configs.효과 === 'scrollX') { 
$(firstContent).css({ 왼쪽:parseInt(firstContent.style.left, 10) - 1 'px' }); css({ 왼쪽: parseInt(secondContent.style.left, 10) - 1 'px' }) 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style. left,10) === -totalWidth) { 
$(itm).css({ left: totalWidth 'px' }) 
} 
}) 
} 
else if (configs.효과 === 'scrollY') { 
$(firstContent).css({ top:parseInt(firstContent.style.top, 10) - 1 'px' }); .css({ top:parseInt(secondContent.style .top, 10) - 1 'px' }) 
$.each(contents, function(idx, itm) { 
if (parseInt(itm.style) .top,10) === -totalHeight) { 
$(itm).css({ top: totalHeight 'px' }) 
} 
}) 
} 
setTimeId = setTimeout(cssAnimate, configs.duration); 
} 
function RollRun(){ 
setTimeId = setTimeout(cssAnimate, configs.delay); 
return jQuery; RollStop(){ 
clearTimeout(setTimeId) ; 
return jQuery; 
} 
return $.extend({ 
rollRun:rollRun, 
rollStop:rollStop 
}); 
} 
}); 

 

3. 전체 데모 소스 코드
 
예제 3.1 

코드 복사

코드는 다음과 같습니다.

<머리>

jQuery 데모
<스타일>
body { 글꼴: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E8F6F96C59ED1"; }
body, div, ul, li, h1 { 여백: 0; 패딩: 0; }
.news { 여백: 100px 0 0 100px; }
.news ul { 목록 스타일: 없음; }
.news-box { 너비: 600px; 왼쪽 여백: 20px; 높이: 24px; 배경색: #fccffd; 오버플로: 숨김; 위치: 상대; _줌: 1; }
.news h1 { margin-bottom: 15px; 왼쪽 패딩: 20px; 색상: #370188; }
.news-list { 위치: 절대; }
.news-list { float: 왼쪽; }
.news-list li { float: 왼쪽; _display: 인라인; 오른쪽 여백: 15px; 높이: 24px; 줄 높이: 24px; 오버플로: 숨김; 단어 줄 바꿈: 정상; }
.news-list li a { 텍스트 장식: 없음; 색상: #000; }
.news-list li a:hover {
-webkit-transition: 색상 .2s 선형, 배경색 .3s 선형;
-moz-전환: 색상 .2s 선형, 배경색 .3s 선형;
-ms-전환: 색상 .2s 선형, 배경색 .3s 선형;
-o-전환: 색상 .2s 선형, 배경색 .3s 선형;
전환: 색상 .2s 선형, 배경색 .3s 선형;
색상: #FF4400;
텍스트 장식: 밑줄;
}
.news-list li a:visited { color: #290065; }

<본문>

文字列表滚动

日方否认将对中國巡航钓鱼岛飞机

<스크립트>
// 这里引用jQuery.roll代码

<스크립트> contents = $('.J_Roll_Content');
contents.bind('mouseenter', function(){
roll_jQuery.rollStop();
});
contents.bind('mouseleave', function(){
roll_jQuery.rollRun();
})
});

例3.2

复代码代码如下:

View Code

jQuery demo

文字列表滚动

在澳中国留学生涉嫌接送非法色情业者赚外快被罚

印度北部等今冬遭遇极寒天气已致数百人被冻死

意大利警方禁止挂中国红灯笼被指危险引燃物

日方否认将对中国巡航钓鱼岛飞机

日本防卫省否认将对中国飞机警告射击(图)

日否认警告射击中海监飞机恐中日因夺岛开战

传解放军举行长白山军演

中国高新6号反潜机问世反潜艇性能优于美军P-3C

张建刚：2030年中国将圆海洋强国梦

运-20现身试飞中心可取代伊尔-76任何功能

东海舰队引入大批无人机饱和攻击让日难以招架

<스크립트>
jQuery.extend({
roll: function(contentCls, contentParentId, configs){
var setTimeID, totalWidth = 0, totalHeight = 0,
firstContent, secondContent,contents;
(함수 (){
var SingleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = SingleContent.children()
if (configs.효과 === 'scrollX' ) {
$.each(nodeList, function(idx, itm) {
totalWidth = $(itm).outerWidth(true);
})
singleContent.css({ 'width' : totalWidth 'px' });
}
else if (configs.eff === 'scrollY') {
$.each(nodeList, function(idx, itm) {
totalHeight = $(itm).outerHeight(true);
});
singleContent.css({ 'height': totalHeight 'px' })
}
cloneContent = SingleContent.clone();
cloneContent.appendTo(contentParentId);
contents = $(contentCls, contentParentId);
firstContent =contents[0];
secondContent =contents[1]; === 'scrollX') {
$(firstContent).css({ 'left': 0 })
$(secondContent).css({ 'left': totalWidth 'px' });
}
else if (configs.eff === 'scrollY') {
$(firstContent).css({ 'top': 0 });
$(secondContent).css({ 'top': totalHeight 'px' });
}
})()
function cssAnimate(){
if (configs.eff === 'scrollX') {
$(firstContent).css({ left:parseInt( firstContent.style.left, 10) - 1 'px' });
$(secondContent).css({ 왼쪽:parseInt(secondContent.style.left, 10) - 1 'px' });
$.each(contents, function(idx, itm) {
if (parseInt(itm.style.left,10) === -totalWidth) {
$(itm).css({ left : totalWidth 'px' })
}
});
}
else if (configs.eff === 'scrollY') {
$(firstContent).css({ top:parseInt(firstContent.style.top, 10) - 1 'px' } );
$(secondContent).css({ top:parseInt(secondContent.style.top, 10) - 1 'px' });
$.each(contents, function(idx, itm) {
if (parseInt(itm.style.top,10) === -totalHeight) {
$(itm).css({ top : 총 높이 'px' })
}
});
}
setTimeId = setTimeout(cssAnimate, configs.duration);
}
function RollRun(){
setTimeId = setTimeout(cssAnimate, configs.delay);
jQuery를 반환합니다.
}
function RollStop(){
clearTimeout(setTimeId);
jQuery를 반환합니다.
}
return $.extend({
rollRun:rollRun,
rollStop:rollStop
});
}
});

<스크립트> contents = $('.J_Roll_Content');
contents.bind('mouseenter', function(){
roll_jQuery.rollStop();
});
contents.bind('mouseleave', function(){
roll_jQuery.rollRun();
})
});