四、文字段落的无缝滚动

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

轮播小诗

页面结构

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

                        <div id="con2" class="con2"></div>
                    </div>
                </div>

原生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。