文本滚动

最新推荐文章于 2024-09-28 16:54:40 发布

iteye_16691

最新推荐文章于 2024-09-28 16:54:40 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： css javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_16691/article/details/82203560

web 专栏收录该内容

9 篇文章

订阅专栏

有时看到一些文字由左而右，或是从下而上显示，现在我来实现这个功能。

从左到右，控制 text-indent就行了；

从下而上，控制 margin-top就行了。

以下是一些代码：

从左到右<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>background position</title>
    <style type="text/css" media="screen">
        #text {border:1px solid #EEAEEE; width:500px; height:25px; text-indent:500px; overflow:hidden;}
    </style>
</head>
<body>
    <div id="text"></div>
    <script type="text/javascript" charset="utf-8">
        function show_text(text) {
            var a = document.getElementById('text');
            var width = a.clientWidth;
            var num = 200;
            var i = 1;
            a.innerHTML = text;
            show_slow = function () { 
                if (i <= num) {
                    a.style.textIndent = width - i * (width/num);
                    i++;
                } else {
                    clearInterval (temp);
                }
            }
            temp = setInterval( show_slow, 100);
        }
        show_text("hello world ");
    </script>
</body>
</html>

从下到上：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>background position</title>
    <style type="text/css" media="screen">
        #contain {border:1px solid #EEAEEE; width:500px; height:30px; overflow:hidden;}
        #text {margin-top:25px; height:auto; width:auto;}
    </style>
</head>
<body>
    <div id="contain"><div id="text"></div></div>
    <script type="text/javascript" charset="utf-8">
        function show_text(s) {
            var text = document.getElementById('text');
            text.innerHTML = s;
            var i = 0;
            var fn = function () {
                if ( i < 10)
                    text.style.marginTop = (25-i*2) + 'px';
                else 
                    clearInterval (temp);
                i++;
            }
            temp = setInterval (fn, 30);
        }
        show_text('hello world');
    </script>
</body>
</html>