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

Question

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

如果你想测试，这里是小提琴网站： http ： //jsfiddle.net/66QYr/

我希望前三个文本显示在左侧（垂直），然后接下来的三个文本显示在右侧（垂直），然后下一个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>

Answer 1

您在此尝试解决两个问题：

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

第一步

第一个问题可以通过一些简单的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>

为您想要的四个文本块中的每一个执行此操作。 在每个名称上使用相同的类名，但为每个名称分配一个唯一的ID（ text2 ， text3等）。

最后，只需使用（如前所述）绝对定位将它们放在您喜欢的位置：

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

...等等。 当你完成后，你应该有这样的东西：

四个绝对定位的div

第二步

褪色元素需要动画。 你有一个基本的动画功能，但我建议你阅读Robert Penner关于补间和动画的文章。 它是为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;
        }
    };
}());

此函数循环显示每个元素，并在前一个元素完成时将其淡入。 （如果代码没有多大意义，那就没关系;闭包很棘手。）

这是JSFiddle的最终结果。 祝好运。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2011-05-09 17:57:46

第一步

第二步

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-05-09 17:57:46

第一步

第二步

解决方案1
2 已采纳 2011-05-09 17:57:46