jQuery不間斷滾動效果(模擬百度新聞支援文字/圖片/垂直滾動)_jquery

一、jQuery.roll 外掛程式使用說明
jQuery.roll 是模擬百度新聞不間斷滾動效果，並支援文字、圖片水平垂直滾動，該函數使用方法為：

複製程式碼 程式碼如下:

/*
* @module jQuery roll
*內容容器className
* @param: contentParentId 內容容器父元素節點ID
* @param: configs 設定參數
*
* @config: effect 滾動效果
* @config: duration 滾動1個像素的運行時間(毫秒數)
* @config: delay 開始滾動的延遲時間(毫秒數)
*
*/
jQuery.roll(contentCls, contentParentId, configs);

二、函數原始碼

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製碼>

jQuery.extend({
roll: function(contentCls, contentParentId, configs){
var setTimeID, totalWidth = 0, totalHeight = 0,
firstContent, seconds; 🎜>(function(){
var singleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = singleContent.children(); $.each(nodeList, function(idx, itm) {
totalWidth = $(itm).outerWidth(true);
});
singleent.css( { 'width': totalWidth 'px' });
}
else if (configs.effect === '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]; (configs.effect === 'scrollX') {
$(firstContent).css({ 'left': 0 });
$(secondContent).css({ 'left': totalWidth 'px' });
}
else if (configs.effect === 'scrollY') {
$(firstContent).css({ 'top': 0 });
$(secondContent) .css({ 'top': totalHeight 'px' });
}
})()
function cssAnimate(){
if (configs.effect === 'scrollX') {
$(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 'px' });
$(secondContent).css({ left: parseInt(secondContentent.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.effect === '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: totalHeight 'px' });
}
});
}
setTimeId = setTimeout(cssAnimate, configs.duration);
}
function rollRun(){
setTimeId = setTimeout(cssAnimate, configs.delay);
return jQuery;
}
function rollStop(){ ;
return jQuery;

}
return $.extend({ rollRun: rollRun, rollStop:rollStop
});
}

}); 🎜> 三、完整demo源碼 例3.1

複製代碼程式碼如下: