四、文字段落的无缝滚动

在做广东省互联网协会官网时，产品经理要求实现这样一个需求：有一首会长写的小诗，希望在首页的一个区域内，无限轮播这首诗。

轮播小诗

页面结构

               
 
                    

                    

                        

                            
这里是五彩缤纷、群芳争妍的世界！
                            
这里是e光谱照、人潮似海的网络爱好者的乐园！
                            
一切网络经济的困惑将在这里烟消云散，豁然开朗；
                            
一切陈旧的企业经营观念将在这里被网络新潮濯涤殆尽。
                            
应该摒弃的，从此摒弃！
                            
早该到来的，正在到来！
                            
在这"科技无限、网络无界"的时空中遨游：
                            
你将认知和被认知，你将熟识和被熟识。
                            
她是Internet精英翱翔之天宇，
                            
是网络新人摘桂之阶梯；
                            
她不仅打上了千百万网民悠缠之情结，
                            
她更为商海卓识者酝酿着无限商机！
                        

                        

                    
                

原生JS部分

        var area = document.getElementById('poemCon');
        area.scrollTop = 0;
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        con2.innerHTML = con1.innerHTML;

        function scrollUp () {
            if ( area.scrollTop >= con1.offsetHeight ) {
                area.scrollTop = 0;
            }else{
                area.scrollTop ++;
            }
        }

        var timer=setInterval(scrollUp,50);

        area.onmouseover = function () {
            clearInterval (timer);
        }
        area.onmouseout=function(){
            timer=setInterval (scrollUp , 50);
        }

关键点为： 复制一份小诗内容到con2， 以及scrollTop 与 offsetHeight。