文本向上移动（走马灯） 转自马黑教程专版

admin

悦颐家园网.

admin

<style type="text/css">

.wai-zmd { /* 走马灯父框 */
        position: absolute;
        width: 400px;
        height: 300px;
        overflow: hidden;
}
.wai-zmd div {/* 走马灯文本框 */
        position: absolute;
        top: 300px;/*与父框高度同 */
        min-height: 20px;
        font: normal 20px Sans-Serif;
        color: #000;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

</style>

<div class="wai-zmd">
        <div id="txt-zmd">
        悦颐家园网
        </div>
</div>

<script language="javascript">

zmd();

function zmd(){
        var ziBox = document.getElementById('txt-zmd');
        var w = ziBox.clientWidth / 2;
        var h = ziBox.clientHeight;
        var style = document.createElement('style');
        var keyframes = '@keyframes fly {to { top: -' + h + 'px;}}';
        style.type = 'text/css';
        style.innerHTML = keyframes;
        ziBox.appendChild(style);
        ziBox.style.animation = 'fly 10s linear infinite';
        ziBox.style.left = 'calc(50% - ' + w + 'px)'; //元素居中
}

</script>

admin

文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所以通过 JS 动态生成 @keyframes 动画并向文本盒子发出 animation 运行指令。


CSS 代码相对容易理解，要注意的地方是父框与子框都需要定位，或 relative 或 absolute 都可以；父框的 overflow: hidden; 是关键，它确保文本盒子只显示在父框之内；父框的宽高尺寸根据应用场景设置，子框的 top 值要与父框的高度值相一致或相差不大。

定位HTML元素可在 CSS 代码的父盒子即 .wai-zmd 内通过 left 和 top 值来完成，其他的修饰，可在父盒子、子盒子中修改、添加。这些，不建议在HTML中做。

JS部分不多做解释，一般情况下套用就好，要说明的是需要修改的部分，其实就一句：

ziBox.style.animation = 'fly 10s linear infinite';

10s 这里，应该能看出是动画的一个运行周期时长，实际使用时应根据文本的长短来设定，比如文本多，则装载文本的高度就会被撑开，它要走动的距离就长，多少时间一个运行周期合适要自己调试。

另外，非常重要的，是HTML的构造：

<div class="wai-zmd">
        <div id="txt-zmd">
                I can fly now.
        </div>
</div>



其中，装载文本的div盒子必须这样使用 id 属性，JS要读取它。

admin

纯CSS自下而上走马灯代码

行一
行二
行三

admin

纯CSS自下而上走马灯代码

<style type="text/css">
.upDiv {
        position: relative;
        width: 300px;
        height: 100px;
        overflow: hidden;
}
.upDiv div {
        position: absolute;
        width: 100%;
        height: 80px; /* 大体等于 行数*字体大小 +字体大小*/
        font-size:  20px;
        text-align: center;
        top: 100%;
        animation: fly 5s linear infinite;
}
/* 动画的 top 为负值，其绝对值等于父元素素高度-字体大小数-若干*/
@keyframes fly { to { top: -75px; } }
</style>

<div class="upDiv">
        <div id="txt">
                行一<br>
                行二<br>
                行三
        </div>
</div>