【小实战】——诗词渲染（诗句逐字出现） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .poleList {
                writing-mode: vertical-rl;
                font-size: 30px;
                color: darkmagenta;
                letter-spacing: 10px;
            }
            .poleList span {
                opacity: 0;
                transition: opacity 0.5s; 
            }
        </style>
    </head>
    <body>
        <div class="poleList">
            
        </div>
        <script type="text/javascript">
            var pole = ['明妃初嫁与胡儿，','毡车百辆皆胡姬。','含情欲语独无处，','传与琵琶心自知。','黄金杆拨春风手，','弹看飞鸿劝胡酒。','汉宫侍女暗垂泪，','沙上行人却回首。','汉恩自浅胡恩深，','人生乐在相知心。','可怜青冢已芜没，','尚有哀弦留至今。'];
            var poleList = document.getElementsByClassName('poleList')[0],
                listLen = pole.length,
                allLen = 0;
            for(var i = 0; i < listLen; i ++) {
                var pPole = document.createElement('p'),
                    letterLen = pole[i].length;
                allLen += letterLen;
                for(var j = 0; j < letterLen; j ++) {
                    var spanPole = document.createElement('span'),
                        intv = (allLen - (letterLen - j)) * 500;
                    spanPole.innerText = pole[i][j];
                    (function(spanPole, intv) {
                        setTimeout(function() {
                            spanPole.style.opacity = 1;
                        },intv);
                    }(spanPole, intv));
                    pPole.appendChild(spanPole);
                }
                poleList.appendChild(pPole);
            }
        </script>
    </body>
</html>

 

posted @ 2020-01-17 16:05  shumeihh  阅读(199)  评论(0)    收藏  举报