3种方法实现列表自动滚动
自动滚动这种效果在网页中还是比较常见的。现在,就我在做项目期间所用到的能够实现自动滚动的方法做一个总结。
方法一:用javascript原生代码实现,不需要依赖任何框架,代码及注释如下:
1 //javascript原生自动滚动 2 function startmarquee(lh,speed,delay,marqueeObj) { //lh---每行列表的高度,speed---滚动的速度,delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id 3 var p=false; 4 var t; 5 var o=document.getElementById(marqueeObj); 6 o.innerHTML+=o.innerHTML; 7 o.style.marginTop=0; 8 o.onmouseover=function(){p=true;} //鼠标移入,停止滚动 9 o.onmouseout=function(){p=false;}//鼠标移出,继续滚动 10 11 function start(){ 12 t=setInterval(scrolling,speed); //定时器,自动滚动 13 if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; 14 } 15 16 function scrolling(){ 17 if(parseInt(o.style.marginTop)%lh!=0){ 18 o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; 19 if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0; 20 }else{ 21 clearInterval(t); 22 setTimeout(start,delay); 23 } 24 } 25 setTimeout(start,delay); 26 } 27 startmarquee(48,20,1000,"marqueebox"); //引用函数
方法二:依赖jquery,可以进行不定高的滚动
1 //列表自动滚动 2 function scrollNews() { 3 var $news = $('#marqueebox table'); 4 var $lineHeight = $news.find('tr:first').height(); 5 $news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () { 6 $news.css({ margin: 0 }).find('tr:first').appendTo($news); 7 }); 8 } 9 10 var scrollTimer = null; 11 var delay = 2000; 12 scrollTimer = setInterval(function () { 13 scrollNews(); 14 }, delay);
方法三:从左往右轮播
1 function ScrollImgLeft(start,end,wrap){ 2 var speed=40; 3 var scroll_begin = document.getElementById(start); 4 var scroll_end = document.getElementById(end); 5 var scroll_div = document.getElementById(wrap); 6 scroll_end.innerHTML=scroll_begin.innerHTML; 7 function Marquee(){ 8 if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ 9 scroll_div.scrollLeft-=scroll_begin.offsetWidth; 10 }else{ 11 scroll_div.scrollLeft++; 12 } 13 } 14 var MyMar=setInterval(Marquee,speed); 15 scroll_div.onmouseover=function() {clearInterval(MyMar);} 16 scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 17 }
基本上上面三种的新闻轮播方法在项目中已经够用了,希望能够对大家有所帮助~如有不懂,欢迎留言~~