javascript - 如何使用 javascript 在有序列表中显示文本

转载作者：行者123 更新时间：2023-12-02 20:18:15

26

4

有人可以检查一下我的代码吗？谢谢

如果您想测试，这里是 fiddle 站点: http://jsfiddle.net/66QYr/

我希望前 3 个文本显示在左侧(垂直)然后接下来的 3 个文本出现在右侧(垂直)然后接下来的 2 个文本出现在右下角(垂直)最后 2 个文本出现在左下角(垂直)

http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic001.png

<html>
<head>
    <title>tintin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">


        #tintin{
        position: relative;
        top: 211px;
        left: 12px;
        font-size:14pt;
        font-weight:bold;
        font-family: Calibri;
        color:red;
        filter:alpha(opacity=0);
        opacity:0;}


        .image{
        height:350px;
        width: 855px;}


    </style>
    <script type="text/javascript">



        var txt=['text1','text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'], init=0,i=0,k=0,speed=20,el;



        var loopCount=1000;
        var j=0;
        //var padd = 20; //set this to an approriate increment
        function fade(){
        init==0?i++:i--;
        el.filters?el.style.filter='alpha(opacity='+i+')':el.style.opacity=i/100;
        el.firstChild.nodeValue=txt[k];
        if(i==100)init=1;
        if(i==0) {init=0;k++;j++;
        el.style.paddingLeft=20*k;
        }
        if(k==txt.length)k=0;
        if (j<loopCount) setTimeout('fade()',speed);
        }
        window.onload=function(){
        el=document.getElementById('tintin');
        fade();
        }
        </script>
        </head>
        <body>
            <div id="tintin">&nbsp;</div>

            <div class="image" style="background-image:url('pic007s.jpg')">;



            </div>
        </body>
        </html>

最佳答案

您试图在这里解决两个问题:

将文本放置在适当的位置
让它们淡入

第一步

第一个问题可以通过一些简单的 CSS 来解决。从容器开始:

#container {
    position:relative;
    width:150px;
    height:150px;
}

<div id="container"></div>

宽度和高度可以是任何值，但您必须告诉它一些东西。我们将把文本放入此容器中，然后使用 position:absolute。这将使它们脱离正常的文档流，如果我们告诉它一个明确的高度，就会折叠容器。

下一步是文本。您需要四个 div，其中的文本为段落:

<div class="text" id="text1">
    <p>text 1</p>
    <p>text 2</p>
    <p>text 3</p>
</div>

对您想要的四个文本 block 中的每一个执行此操作。对每个类使用相同的类名，但为每个类提供自己的唯一 ID(text2、text3 等)。

最后，只需使用(正如我之前所说的)绝对定位将它们放置在您想要的位置:

.text { position:absolute; }
#text1 { top:0;  left:0; }
#text2 { top:0; right:0; }

...等等。完成后，您应该得到如下所示的内容:

four absolutely positioned divs

第二步

淡入淡出的元素需要动画。你有基本的动画功能，但我建议你阅读Robert Penner's article关于补间和动画。它是为 ActionScript 编写的，但适用完全相同的原则。

目前，这是一个很好的通用 JavaScript 方法，它将获取一个元素并将其淡入:

function fadeIn(totalTime, elem, after) {
    var cos = Math.cos,
        PI = Math.PI,
        startTime = +new Date(),
        endTime = startTime + totalTime,
        timer;

    elem.style.opacity = 0;
    elem.style.filter = 'alpha(opacity=0)';

    timer = setInterval(function () {
        var currentTime = +new Date();
        currentTime = currentTime > endTime ? 1 : (currentTime - startTime) / totalTime;

        var distance = (1 - cos(currentTime * PI)) / 2;
        elem.style.opacity = distance;
        elem.style.filter = 'alpha(opacity=' + distance * 100 + ')';

        if (currentTime === 1) {
            clearInterval(timer);
            if (after) {
                after();
            }
        }
    }, 40);
}

您可以告诉此函数您希望动画持续多长时间(以毫秒为单位)，您还可以给它一个在淡入淡出完成时执行的函数(如果您愿意；这不是必需的) )。

如果我正确理解你的问题，你希望所有文本开始不可见，然后淡入，一次一个，从顶部顺时针方向。我们可以用CSS使它们不可见，但是如果用户禁用了JS，页面将显示为空白。因此，您需要首先“获取”所有元素(使用某种 getByClass 函数或对 getElementById 进行四种不同的调用)并将其不透明度设置为 0。

因此，您可以通过执行以下操作使第一组文本淡入:

var text1 = document.getElementById('text1');
fadeIn(1000, text1);

问题是，通过这样做，无法知道何时开始下一个动画。因此，我们需要在闭包的帮助下创建一个函数来帮助跟踪事物(这假设您已经在 JS 中获取了元素并使它们不可见):

var tracker = (function () {
    var texts = [text1, text2, text3, text4],
        i = 0;

    return function () {
        var text = texts[i];
        if (text) {
            fadeIn(1000, text, tracker);
            i += 1;
        }
    };
}());

此函数循环遍历每个元素，并在前一个元素完成后淡入。 (如果代码没有多大意义也没关系；闭包是很棘手的事情。)

Here is the final result, in JSFiddle.祝你好运。

关于javascript - 如何使用 javascript 在有序列表中显示文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5936290/

26

4

0

文章推荐： csv - 如何在 Clojure 中持续监控文件的内容？

文章推荐： sql - 如何在 Access 2007 中查询截止日期

文章推荐：谷歌地图中的javascript变量不可用，太困惑了!

Python:过滤器(函数，序列)和映射(函数，序列)之间的区别
我正在阅读 Python 文档以真正深入了解 Python 语言，并遇到了 filter 和 map 函数。我以前使用过过滤器，但从未使用过映射，尽管我在 SO 上的各种 Python 问题中都见过这
algorithm - 给定一个 preOrder 和 inOrder 序列，可能有多少级阶 BST 序列？
当我尝试打印 BST 的级别顺序时，这个问题提示了我。这是一个 Pre-Order Sequence: 4, 1, 2, 3, 5, 6, 7, 8 In_order Sequence : 1, 2
c++ - 定义函数后 main 出错？ "undefined reference to ' 序列::序列()'"
我的代码在 main(序列测试；)的第一行出现错误，指出它是对 sequence::sequence() 的 undefined reference 。我无法更改 main 中的代码。有谁知道我该如何
latex 序列\/?
这可能很简单，但我在通常的 latex 指南中找不到任何相关内容。在这句话中: {\em hello\/} “\/”的目的是什么？最佳答案这就是所谓的斜体校正。其目的是确保斜体文本后有适当的间距。
Postgresql 序列
当我从 Postgresql 表中删除所有记录，然后尝试重置序列以在插入时开始一个编号为 1 的新记录时，我得到不同的结果: SELECT setval('tblname_id_seq', (SELE
30、MariaDB 序列
在版本10.0.3中，MariaDB引入了一种称为序列的存储引擎。其ad hoc为操作生成整数序列，然后终止。该序列包含正整数，以降序或升序排列，并使用起始，结束和递增值。它不允许在多个查询中
数字的 Groovy 序列
如何在 Groovy 中获取给定数字的序列，例如: def number = 169 // need a method in groovy to find the consecutive number
作为特定复杂类型的扩展的任何类型元素的 xsd 序列
基本上，如果这是 .NET，它看起来像这样: ISomething { string A { get; } int B { get; } } var somethings = new List
非阻塞赋值的 Verilog 序列
说以下代码部分(同一块): A <= 1 A <= 2 变量 A 总是被赋值为 2 吗？还是会出现竞争条件并分配 1 或 2？我对非阻塞赋值的理解是，由硬件在 future 分配变量 A，因此它可能
WiX Action 序列
在运行 WiX 设置时，我正在寻找操作列表及其顺序。不知何故，官方网站似乎没有提供任何信息。基本问题是我想正确安排我的自定义操作。通常我需要使用 regsvr32.exe 注册一个 DLL，而这只能
具有至少一个元素的 F# 序列
F#初学者在这里我想创建一个类型，它是具有至少一个元素的另一种具体类型(事件)的序列。任何其他元素都可以在以后随时添加。通常在 C# 中，我会创建一个具有私有(private) List 和公共(p
sql - 在Oracle中删除所有用户表/序列
作为构建过程和不断发展的数据库的一部分，我试图创建一个脚本，该脚本将删除用户的所有表和序列。我不想重新创建用户，因为这将需要比所允许的更多的权限。我的脚本创建了一个过程来删除表/序列，执行该过程，然
日期和向量的 R 序列
我想恢复两个向量的第一个日期和相同向量的第二个日期之间的日期序列，.... 这是一个例子: dates1 = as.Date(c('2015-10-01', '2015-03-27', '2015-0
SQL ORDER BY(序列)
这个问题已经有答案了: sql ORDER BY multiple values in specific order? (12 个回答) 已关闭 9 年前。我有一个 sql 语句，我想要ORDER
日期和向量的 R 序列
我想恢复两个向量的第一个日期和相同向量的第二个日期之间的日期序列，.... 这是一个例子: dates1 = as.Date(c('2015-10-01', '2015-03-27', '2015-0
java - 如何在java中转义],[序列？
在用java编写代码时，我需要用“],[”分割字符串。下面是我的代码。 try (BufferedReader reader = new BufferedReader(new InputStreamR
数字的 Collatz 序列
这个问题已经有答案了: Project Euler Question 14 (Collatz Problem) (8 个回答) 已关闭 9 年前。我正在尝试查找数字的 Collatz 序列。以下
C++:使用循环和变量模式(序列)
我有一个例程函数process_letter_location(const char& c, string &word)。在我的 main 中，我声明了一系列字符串变量，如下所示: string s
c++ - 最长的多米诺骨牌链/序列
我需要找到最长的多米诺骨牌链，给定一组 12 个随机挑选的多米诺骨牌。我已经递归地生成了多米诺骨牌的所有可能性(使用 0 到 12 的面值有 91 种可能性)。多米诺骨牌由一 block “砖 blo
c++ - 序列 vector
我有这个数据结构 Seq，它继承了类 vector 但有一些额外的功能。使用这个数据结构 Seq 我有这个预定义的数据结构: typedef Seq > MxInt2d; 我现在想要一个包含多个 Mx

首页

博学

6Ren·AI

商城

javascript - 如何使用 javascript 在有序列表中显示文本

第一步

第二步