`
ipython
  • 浏览: 289229 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

文本滚动

    博客分类：
  • web
cssjavascript 
阅读更多

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

从左到右，控制 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>
 
分享到：
| javascript div 跳动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics