其实这效果用css3的animation就能办到，不过这里就当熟悉js的操作吧！
效果图如下：
html部分：
<div class="box"> ???<div id="shengjiang"> ???????<p><span color="#ff0">一行文字</span></p> ???</div></div>
.box这层div可以不用加，这里只是作为子绝父相的父元素罢了！当然，把游览器作为父元素也可以，只是想镶嵌到其他div中就麻烦了。
css部分：
*{margin: 0;padding: 0;} ???????.box{ ???????????position: relative; ???????????margin: 100px; ???????????border: 1px solid #ccc; ???????????width: 200px; ???????????height: 500px; ???????} ???????#shengjiang{ ???????????position: absolute; ???????????color: #000; ???????}如果是css3，就直接换成以下的就好了。
*{margin: 0;padding: 0;} ???????.box{ ???????????position: relative; ???????????margin: 100px; ???????????border: 1px solid #ccc; ???????????width: 200px; ???????????height: 500px; ???????} ???????#shengjiang{ ???????????position: absolute; ???????????color: #000; ???????????animation:mymove 5s infinite; ???????} ???????@keyframes mymove ???????????{ ???????????????0% {top:0px;} ???????????????50% {top:200px;} ???????????????100%{top: 0px;} ???????????}animation，css3的动画属性
mymove 定义的名称，可自定义。
5s 一次需要的时间
infinite 循环反复
@keyframes mymove 给上面定义的名称添加动画属性。
即0%时所在位置，50%时所在位置，100%时所在位置。
0-100%之间可任意分隔。
top 是从0到200px再回到0；
js部分，虽说到这里就已经达成效果了说……
???var step = 4; ???????function anim(x,y){ ???//x为最等端，y为最底端 ???????????document.all["shengjiang"].style.top=x+"px"; ???//初始顶端位置 ???????????if (x>=y) { ???????????????step = -4; ???//达到最底端时为负值，其数值表示每一次执行setTimeout时，移动的像素减少4像素，数值越大，移动的距离也就越大。每次调用时也就显得越快。 ???????????} ???????????if (x<0) { ???//这行的零所代表的，居然是与显示窗口（子绝父相的父级）相对高度 ???????????????step = 4; ???//如果到达指定高度时，数值为正，即加大参数向下移动 ???????????} ???????????setTimeout(‘anim(‘+(x+step)+‘,‘+y+‘)‘, 35); ???//等待多少秒执行，所以数值越小速度就越快 ???????????// ???????} ???????anim(5,200);//5只是初始位置，200才是整体的高度，至于如何确认最顶端，还要看if (x<0) {step = 4;}中的x<0中的0这个数值。js文字升降效果
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9461028.html