js文字升降效果

Posted 2021-01-02 银王意志

其实这效果用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这个数值。