jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

一、jQuery.roll 插件使用说明
jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：

复制代码 代码如下:

/*
* @module jQuery roll
* @param: contentCls 内容容器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, secondContent, contents;
(function(){
var singleContent, cloneContent, nodeList;
singleContent = $(contentCls, contentParentId);
nodeList = singleContent.children();
if (configs.effect === 'scrollX') {
$.each(nodeList, function(idx, itm) {
totalWidth += $(itm).outerWidth(true);
});
singleContent.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];
if (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(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.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(){
clearTimeout(setTimeId);
return jQuery;
}
return $.extend({
rollRun: rollRun,
rollStop: rollStop
});
}
});

三、完整demo源码
例3.1

复制代码 代码如下:

文字列表滚动

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


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


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

例3.2

复制代码 代码如下:

View Code

文字列表滚动

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


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


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


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


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


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


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


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


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


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


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