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>
Javascript 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
模拟select的代码
Oct 19 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
AngularJS表单验证功能分析
May 26 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Vue 递归多级菜单的实例代码
May 05 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
You might like
PHP写的资源下载防盗链类分享
2014/05/12 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
美国购物网站:Clickhere2shop
2021/01/28 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
《匆匆》教学反思
2014/02/22 职场文书
《锄禾》教学反思
2014/04/08 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
党员领导干部承诺书
2014/05/28 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
九年级语文教学反思
2016/03/03 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
浅谈Python基础之列表那些事儿
2021/05/11 Python