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

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

코드 복사

코드는 다음과 같습니다.

<머리>



<스타일>
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

文字列表滚动

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


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


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


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


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


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


• 传解放军举行长白山军演


• 中国高新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();
})
});