笔者介绍：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，效果还不错，其他方法可以继续丰富
