编程 Javascript

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

Posted in Javascript onFebruary 05, 2013

一、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

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="description" content="jQuery实现无间隙滚动效果"> 
<title>jQuery demo</title> 
<style> 
body { font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; } 
body, div, ul, li, h1 { margin: 0; padding: 0; } 
.news { margin: 100px 0 0 100px; } 
.news ul { list-style: none; } 
.news-box { width: 600px; margin-left: 20px; height: 24px; background-color: #fcfcfd; overflow: hidden; position: relative; _zoom: 1; } 
.news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; } 
.news-list { position: absolute; } 
.news-list { float: left; } 
.news-list li { float: left; _display: inline; margin-right: 15px; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; } 
.news-list li a { text-decoration: none; color: #000; } 
.news-list li a:hover { 
-webkit-transition: color .2s linear,background-color .3s linear; 
-moz-transition: color .2s linear,background-color .3s linear; 
-ms-transition: color .2s linear,background-color .3s linear; 
-o-transition: color .2s linear,background-color .3s linear; 
transition: color .2s linear,background-color .3s linear; 
color: #FF4400; 
text-decoration: underline; 
} 
.news-list li a:visited { color: #290065; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div id="J_news" class="news"> 
<h1>文字列表滚动</h1> 
<div id="J_Roll_Container" class="news-box"> 
<ul class="J_Roll_Content news-list"> 
<li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li> 
</ul> 
</div> 
</div> 
<script> 
// 这里引用jQuery.roll代码 
</script> 
<script> 
$(function(){ 
var roll_jQuery, contents; 
roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollX', duration: 40, delay: 500 }).rollRun(); 
contents = $('.J_Roll_Content'); 
contents.bind('mouseenter', function(){ 
roll_jQuery.rollStop(); 
}); 
contents.bind('mouseleave', function(){ 
roll_jQuery.rollRun(); 
}); 
}); 
</script> 
</body> 
</html>

例3.2

View Code 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="description" content="jQuery实现无间隙滚动效果"> 
<title>jQuery demo</title> 
<style> 
body { font: 12px/1.5 tahoma, "microsoft yahei", "微软雅黑E\8F6F\96C5\9ED1"; } 
body, div, ul, li, h1 { margin: 0; padding: 0; } 
.news { margin: 100px 0 0 100px; } 
.news ul { list-style: none; } 
.news-box { padding: 20px; width: 310px; height: 192px; background-color: #fcfcfd; overflow: hidden; position: relative; } 
.news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; } 
.news-list { position: absolute; } 
.news-list li { width: 100%; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; } 
.news-list li a { text-decoration: none; color: #000; } 
.news-list li a:hover { 
-webkit-transition: color .2s linear, background-color .3s linear; 
-moz-transition: color .2s linear, background-color .3s linear; 
-ms-transition: color .2s linear, background-color .3s linear; 
-o-transition: color .2s linear, background-color .3s linear; 
transition: color .2s linear, background-color .3s linear; 
color: #FF4400; 
text-decoration: underline; 
} 
.news-list li a:visited { color: #290065; } 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div id="J_news" class="news"> 
<h1>文字列表滚动</h1> 
<div id="J_Roll_Container" class="news-box"> 
<ul class="J_Roll_Content news-list"> 
<li><a href="http://news.ifeng.com/world/detail_2013_01/11/21098447_0.shtml" target="_blank">在澳中国留学生涉嫌接送非法色情业者赚外快被罚</a></li> 
<li><a href="http://news.qq.com/a/20130111/000993.htm" target="_blank">印度北部等今冬遭遇极寒天气 已致数百人被冻死</a></li> 
<li><a href="http://news.qq.com/a/20130111/001251.htm" target="_blank">意大利警方禁止挂中国红灯笼 被指危险引燃物</a></li> 
<li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li> 
<li><a href="http://military.people.com.cn/n/2013/0110/c1011-20150261.html" target="_blank">传解放军举行长白山军演</a></li> 
<li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14335623.shtml" target="_blank">中国高新6号反潜机问世 反潜艇性能优于美军P-3C</a></li> 
<li><a href="http://opinion.huanqiu.com/opinion_world/2013-01/3467875.html" target="_blank">张建刚：2030年中国将圆海洋强国梦</a></li> 
<li><a href="http://news.hf365.com/system/2013/01/10/012873928.shtml" target="_blank">运-20现身试飞中心 可取代伊尔-76任何功能</a></li> 
<li><a href="http://mil.sohu.com/20130110/n362988784.shtml" target="_blank">东海舰队引入大批无人机 饱和攻击让日难以招架</a></li> 
</ul> 
</div> 
</div> 
<script> 
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 
}); 
} 
}); 
</script> 
<script> 
$(function(){ 
var roll_jQuery, contents; 
roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollY', duration: 40, delay: 500 }).rollRun(); 
contents = $('.J_Roll_Content'); 
contents.bind('mouseenter', function(){ 
roll_jQuery.rollStop(); 
}); 
contents.bind('mouseleave', function(){ 
roll_jQuery.rollRun(); 
}); 
}); 
</script> 
</body> 
</html>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现

Apr 18 Javascript

JS中处理与当前时间间隔的函数代码

May 23 Javascript

jquery中map函数遍历数组用法实例

May 18 Javascript

jquery实现表单输入时提示文字滑动向上效果

Aug 10 Javascript

js鼠标经过tab选项卡时实现切换延迟

Mar 24 Javascript

JS实现点击Radio动态更新table数据

Jul 18 Javascript

JavaScript框架Angular和React深度对比

Nov 20 Javascript

JS基于递归实现网页版计算器的方法分析

Dec 20 Javascript

在vue项目中使用sass的配置方法

Mar 20 Javascript

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

Jan 19 Javascript

Vue实现简易计算器

Feb 25 Javascript

浅谈JavaScript 声明提升

Sep 14 Javascript

得到jQuery detach()后节点中的某个值实现代码

Feb 05 #Javascript

jquery zTree异步加载简单实例分享

Feb 05 #Javascript

JS打印gridview实现原理及代码

Feb 05 #Javascript

漂亮的jquery提示效果(仿腾讯弹出层)

Feb 05 #Javascript

Js 获取Gridview选中行的内容操作步骤

Feb 05 #Javascript

6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

Feb 04 #Javascript

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

Feb 04 #Javascript