js无缝滚动广告条
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2014-05-27 08:48:04
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script> <title>无标题文档</title> <style> *{ margin:0px; padding:0px;} .wrapdiv{ border:solid 1px #ccc; margin:100px auto; padding:0px 40px;} </style> <script> (function($){ var data={mousehover:false,conf:null,scrobj:null,scrobj1:null,scrobj2:null}; //滚动 var scr=function(){ o1=data.scrobj1; o2=data.scrobj2; setInterval(function(){ if(!data.mousehover){ top1=parseInt(o1.css('top')); top2=parseInt(o2.css('top')); if(Math.abs(top1)>o1.outerHeight()){ o1.css('top',o2.outerHeight()+'px'); }else{ o1.css('top',(--top1)+'px'); } if(Math.abs(top2)>o2.outerHeight()){ o2.css('top',o1.outerHeight()+'px'); }else{ o2.css('top',(--top2)+'px'); } } },data.conf.shijian); } $.fn.myscr=function(options){ var thissel=$(this).selector;//取传进来的选择器 var defaults={ 'width':'200px', 'height':'100px', 'innerdiv':'.innerdiv',//默认内容块类 'cycle':true, 'shijian':90 }; var opts = $.extend(defaults, options); data.conf=opts; this.css({ 'width':opts.width, 'height':opts.height, 'overflow':'hidden' }); //查找里面的innerdiv this.css('position','relative'); data.scrobj1=this.find(opts.innerdiv); data.scrobj2=this.find(opts.innerdiv).clone(true); data.scrobj2.appendTo(this); this.find(opts.innerdiv).css('position','absolute'); this.find(opts.innerdiv).eq(0).css('top','0px'); this.find(opts.innerdiv).eq(1).css('top',this.find(opts.innerdiv).eq(0).outerHeight()+'px'); this.find(opts.innerdiv).hover(function(){ data.mousehover=true; },function(){ data.mousehover=false; }); scr(); }; })(jQuery); </script> </head> <body> <div class="wrapdiv"> <ul class="innerdiv"> <li>11111111111111</li> <li>22222222222222</li> <li>33333333333333</li> <li>44444444444444</li> <li>55555555555555</li> <li>66666666666666</li> <li>77777777777777</li> </ul> </div> <script> $(function(){ $('.wrapdiv').myscr({ 'width':'200px',//外容器的宽度 'height':'100px',//外容器的高度 'innerdiv':'.innerdiv',//滚动的内容块 'shijian':60//滚动速度,越小越快 }); }); </script> </body> </html>
提示:您可以先修改部分代码再运行