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);

　　方法三：从左向右轮播

<p> 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