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

文本滚动

    博客分类:
  • web
阅读更多

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

从左到右,控制 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>
 
分享到:
评论

相关推荐

    易语言编辑框文本滚动源码

    编辑框文本滚动在软件开发中是一项基本功能,特别是在文本编辑器、日志查看器或者聊天应用等场景中常见。易语言提供了丰富的控件和函数支持,使得开发者能够方便地实现这一功能。 在易语言中,编辑框(EditBox)是...

    Unity,Text文本滚动

    在Unity游戏引擎中,文本滚动是一种常见的交互方式,特别是在UI设计和信息展示中。这个功能允许用户查看超出屏幕或固定区域的长文本内容。本文将深入探讨如何在Unity中实现文本滚动,包括基本原理、使用说明和脚本...

    基于QT的文本滚动显示

    "基于QT的文本滚动显示"是指利用QT库中的组件和功能来设计一个可以动态滚动显示文本的界面。 在QT中,我们可以使用QLabel或QTextEdit等部件来显示文本,但要实现文本的滚动效果,通常会采用QLabel配合QTimer或者...

    易语言编辑框文本滚动源码.rar

    在"易语言编辑框文本滚动源码.rar"这个压缩包中,很可能包含了一个易语言项目,该项目实现了编辑框内的文本滚动功能。通过分析和学习这份源码,我们可以了解到易语言中处理文本滚动的具体方法。 在易语言中,编辑框...

    QLabel文本滚动显示

    QLabel文本滚动显示

    as3 textfild动态文本滚动条模型

    在处理大量文本时,特别是在用户界面设计中,动态文本滚动条模型是必不可少的功能,它允许用户查看超出舞台可视区域的文本内容。本文将深入探讨如何在AS3中创建自定义的滚动条,并将其应用于`TextField`。 首先,...

    Android自动文本滚动控件(跑马灯)

    本文将详细探讨如何在Android中实现这样一个自动文本滚动控件。 首先,我们要明白跑马灯效果的实现主要涉及到两个关键组件:`TextView`和`Scroller`。`TextView`是Android中的基础文本显示控件,而`Scroller`则是一...

    易语言文本滚动不闪烁

    "易语言文本滚动不闪烁"是一个专门针对这个问题的技术解决方案,旨在提供平滑、无闪烁的文本滚动效果。 在易语言中,文本滚动通常是通过更新窗口控件,如文本框或标签的显示内容来实现的。当文本内容更新过快或者...

    文本滚动显示.e.rar

    文本滚动显示在IT行业中是一个常见的视觉效果,尤其在软件开发、网页设计以及用户界面(UI)设计中扮演着重要角色。这种技术使得大量的文本信息可以在有限的屏幕空间内连续展示,提高了信息的可读性和用户体验。下面...

    ActionScript 3动态文本滚动条模型

    本篇文章将深入探讨如何在ActionScript 3中实现动态文本滚动条模型。 一、动态文本类型 在ActionScript 3中,有三种类型的文本字段:StaticText(静态文本)、DynamicText(动态文本)和InputText(输入文本)。...

    易语言源码易语言文本滚动不闪烁源码.rar

    本资源"易语言源码易语言文本滚动不闪烁源码.rar"提供了一种实现易语言环境下,文本滚动时避免闪烁的技术方案。 在计算机图形界面中,文本闪烁是一个常见的问题,尤其是在文本滚动时。这种闪烁通常是由于屏幕刷新率...

    文本滚动显示.rar

    在IT行业中,文本滚动显示是一种常见的用户界面(UI)元素,尤其在电子设备的显示屏空间有限的情况下,如手机、电视或电脑显示器等。文本滚动显示技术允许用户在有限的屏幕上查看超过屏幕容量的大量文本信息,通过...

    MFC文本滚动空间

    在给定的“MFC文本滚动空间”主题中,我们主要关注的是如何在MFC应用中实现一个自定义控件,该控件能够动态显示滚动的文本,这通常用于通知、提示或者广告信息。下面我们将深入探讨这一技术。 首先,我们需要了解...

    屏幕文本滚动播出事例

    屏幕文本滚动播出是一种常见的软件界面效果,常用于展示滚动信息,如歌词、公告或滚动字幕。在本案例中,我们将探讨如何使用C++语言来实现这一效果,特别是在早期的编程实践中,这样的技术通常依赖于双缓冲机制来...

    易语言源码文本滚动显示.7z

    《易语言源码文本滚动显示》 易语言是一种基于事件驱动的中文编程语言,它以“易”为设计理念,旨在让编程变得更加简单易懂。在本压缩包中,"易语言源码文本滚动显示.e" 文件是易语言编写的源代码,主要实现了文本...

    易语言源码易语言文本滚动源码.rar

    "易语言文本滚动源码"是一个特定的项目,它涉及到易语言中的文本处理和用户界面交互。 在易语言中,文本滚动通常是指在窗口或者控件(如编辑框)中显示大量文本时,用户可以通过滚动条来查看文本的不同部分。这种...

    易语言文本滚动源码.7z

    本文将深入探讨“易语言文本滚动源码”这一主题,旨在帮助你理解如何在易语言中实现文本的滚动效果。 一、易语言基础 易语言的核心理念是“易学易用”,它通过汉字作为编程关键字,减少了学习编程的难度。其语法...

    易语言源码文本滚动显示.zip

    这个“易语言源码文本滚动显示.zip”压缩包文件内包含的源码示例,很可能是用于展示如何在易语言环境中实现文本的滚动显示功能。 在易语言中,文本滚动显示是常见的用户界面元素,常见于消息提示、日志查看或文本...

    文本滚动抽奖程序学习资料分享c

    文本滚动抽奖程序是一种常见的互动应用,常用于各类活动或晚会中,通过滚动显示参与者的姓名或编号,随机选取中奖者。在这个主题下,我们主要关注的是如何利用Java编程语言来实现这样的功能。Java因其跨平台性和丰富...

    文本滚动抽奖程序

    文本滚动抽奖程序是一种常见的互动应用,常用于各类活动或晚会的抽奖环节,通过在屏幕上滚动显示参与者名单,然后随机选取中奖者。这种程序通常由编程语言实现,Java作为广泛使用的面向对象的语言,自然也是创建此类...

Global site tag (gtag.js) - Google Analytics