文字掉落效果 转自马黑教程专版

admin

admin

<style type="text/css">

#dropText { margin: 10px auto 0; width: 600px; height: 100px; position: relative; }
#dropText span { display: inline-block; font-size: 2rem; position: absolute; }

</style>

<div id="dropText"></div>

<script language="javascript">

var myStr = "正是江南好風景落花時節又逢君";
var ttLen = myStr.length;
var step = 0;
var spanId = 0;
var dt = document.getElementById("dropText");
//文本写入span标签
var num = 0;
while(num < ttLen) {
        dt.innerHTML += "<span id='span" + num + "' style='left: " + num*2 + "rem;top: 0;'>" + myStr.slice(num, num+1) + "</span>";
        num ++;
}
//启动定时器令文本逐一落下
setInterval(function drop() {
        var id = "span" + spanId;
        var tspan = document.getElementById(id);
        step++;
        tspan. style.top = step +"px";
        if(step > dt.clientHeight - 45){
                spanId ++;
                if(spanId >= ttLen){
                        spanId = 0;
                        Array.from(dt.children).forEach(function(item){ item.style.top = "0px"; }); //复位
                }
                step = 0;
        }
}, 10);

</script>