jQuery模拟百度新闻不间断滚动效果，支持文字、图片水平垂直滚动
一、jQuery.roll 插件使用说明
jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：
/* * @作者 华子yjh http://www.cnblogs.com/yangjunhua/ * @source 博客园 * @module jQuery roll * @param: contentCls 内容容器className * @param: contentParentId 内容容器父元素节点ID * @param: configs 配置参数 * * @config: effect 滚动效果 * @config: duration 滚动1个像素的运行时间(毫秒数) * @config: delay 开始滚动的延迟时间(毫秒数) * */ jQuery.roll(contentCls, contentParentId, configs);
二、函数源码
1 jQuery.extend({ 2 roll: function(contentCls, contentParentId, configs){ 3 4 var setTimeID, totalWidth = 0, totalHeight = 0, 5 firstContent, secondContent, contents; 6 7 (function(){ 8 var singleContent, cloneContent, nodeList; 9 10 singleContent = $(contentCls, contentParentId); 11 nodeList = singleContent.children(); 12 13 if (configs.effect === 'scrollX') { 14 $.each(nodeList, function(idx, itm) { 15 totalWidth += $(itm).outerWidth(true); 16 }); 17 singleContent.css({ 'width': totalWidth + 'px' }); 18 } 19 else if (configs.effect === 'scrollY') { 20 $.each(nodeList, function(idx, itm) { 21 totalHeight += $(itm).outerHeight(true); 22 }); 23 singleContent.css({ 'height': totalHeight + 'px' }); 24 } 25 26 cloneContent = singleContent.clone(); 27 cloneContent.appendTo(contentParentId); 28 29 contents = $(contentCls, contentParentId); 30 firstContent = contents[0]; 31 secondContent = contents[1]; 32 33 if (configs.effect === 'scrollX') { 34 $(firstContent).css({ 'left': 0 }); 35 $(secondContent).css({ 'left': totalWidth + 'px' }); 36 } 37 else if (configs.effect === 'scrollY') { 38 $(firstContent).css({ 'top': 0 }); 39 $(secondContent).css({ 'top': totalHeight + 'px' }); 40 } 41 42 })() 43 44 function cssAnimate(){ 45 if (configs.effect === 'scrollX') { 46 $(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' }); 47 $(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' }); 48 49 $.each(contents, function(idx, itm) { 50 if (parseInt(itm.style.left,10) === -totalWidth) { 51 $(itm).css({ left: totalWidth + 'px' }); 52 } 53 }); 54 } 55 else if (configs.effect === 'scrollY') { 56 $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' }); 57 $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' }); 58 59 $.each(contents, function(idx, itm) { 60 if (parseInt(itm.style.top,10) === -totalHeight) { 61 $(itm).css({ top: totalHeight + 'px' }); 62 } 63 }); 64 } 65 66 setTimeId = setTimeout(cssAnimate, configs.duration); 67 } 68 69 function rollRun(){ 70 setTimeId = setTimeout(cssAnimate, configs.delay); 71 return jQuery; 72 } 73 74 function rollStop(){ 75 clearTimeout(setTimeId); 76 return jQuery; 77 } 78 79 return $.extend({ 80 rollRun: rollRun, 81 rollStop: rollStop 82 }); 83 } 84 });
三、完整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>