Home > Web Front-end > JS Tutorial > jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)_jquery

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

WBOY
Release: 2016-05-16 17:42:10
Original
1344 people have browsed it
一、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
复制代码 代码如下:





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template