Question

我想创建一个可以转换为长标题的文本。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #abc {
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 100px;
    }

    #def {
        position: absolute;
        font-size: 2em;
        color: #000;
        margin: 0;
        width: 400px;
    }
    </style>
    <script>
    var teks = null;

    function geser() {
        var left = 0;

        function frame() {
            left--; // update parameter
            teks.style.left = left + 'px';
            if (left == -200) {
                clearInterval(id);
                setTimeout(function() {
                    runningtext();
                }, 2000);
            }
        }
        var id = setInterval(frame, 40)
    }

    function runningtext() {
        teks = document.getElementById("def");
        teks.style.left = '0px';
        setTimeout(function() {
            geser();
        }, 2000);
    }
    window.onload = runningtext;
    </script>
</head>

<body>
    <div id="abc">
        <p id="def">Cihampelas Demin Center</p>
    </div>
</body>

</html>

该脚本成功使用1行。

输出：

Cihampelas Demin Center

问题是：

是否有另一种方法可以在没有#def { width:400px; }的情况下打印1行？

（当我尝试#def { display:inline; }

输出：

Cihampelas
Demin Center

）

当对象的left = -200px时，我想以同样的方式保留，但我不知道。

如何创建流畅和美观的略微文字？

0 个答案: