笔者介绍：13级毕业生，目前毕业一年，前就职地点北京，任职一年。前端小菜鸟吧，前一家公司是个创业小公司，毕业时做的是python 后端开发，由于前端人员紧张，后来主要参与前端页面开发。之前做过农业方面数据分析数据清洗，农页数据可视化，CMS系统开发。现在长沙，主要负责Web开发，H5页面，小程序等前端工作

目前技术能力：一直在努力学习JS面向对象开发，Vue.js相关技术栈，Webpack打包工具，小程序开发，H5移动端页面开发

不骄不躁吧，一步一个脚印，趁这段时间好好总结，好好沉淀

---

好,废话不多说，进入正题吧

---

跑马灯效果JS文字轮播效果实现

实现思路：

• css scrollTop属性可以控制元素的被隐藏在内容区域上方的像素。

• 在父级元素小于子元素的时候可以使用这个属性

• 复制一个元素实现跑马灯循环效果（从下往上循环跑动）

• 利用js定时器实现动画，当scrollTop等于子元素高度时，scrollTop设置为0

---

• 代码实现：

html：

    <div class = 'testScroll' id="scrollBlock"> 
        <ul class="scrollItem" id="contentBlock">
            <li> 跑马灯</li>
        </ul>
    </div>

css：

设置子元素比父元素稍微高一点点，父元素overflow:hidden可以实现隐藏效果

        ul li{
            list-style: none;
        }
        body{
            background-color: #f3f3f3
        }
        .testScroll{
            overflow: hidden;
            height: 4rem;
            background-color: #fff;
        }
        #contentBlock{
            margin-top: 0;
            margin-bottom: 0;
            
            height: 101%;
        }

JS：

function zMarquee(parentDom,childDom,speedParam,stayTime){
            if(parentDom && childDom){
                var parent = document.getElementById(parentDom);
                var child = document.getElementById(childDom);
                var childHeight = child.offsetHeight;   //跑马灯内容高度
                var speed = speedParam?speedParam:40;   //跑马灯速度
                var timer = null;   
                var delay = stayTime?stayTime:1000; //默认到底保持时间
                parent.scrollTop = 1;
                parent.innerHTML += parent.innerHTML;
                var start_scroll = function(){
                    timer = setInterval(scrollUp,speed);
                    parent.scrollTop++;
                }
                var scrollUp = function(){
                    if(Math.round(parent.scrollTop)%(childHeight*2)==0){
                        clearInterval(timer);
                        setTimeout(start_scroll,10);
                        parent.scrollTop = parent.scrollTop + 1;
                    }else{
                        if(parent.scrollTop >= childHeight){
                            parent.scrollTop = 0;
                        }
                        parent.scrollTop++;

                    }
                                    
                }
                if(parent.offsetHeight < childHeight){
                    start_scroll()
                }else{
                    console.error("zMarquee throw a error ,parentDom's height is more than childDom's ")
                }

            }else{
                console.error('zMarquee Param illegal ！')
            }
        }
        zMarquee('scrollBlock','contentBlock',20)

代码比较简单，简单的封装了一个方法，参数为父元素和子元素的ID，可选参数为speed，效果还不错，其他方法可以继续丰富

github地址