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

Question

Could someone please check my code? 有人可以检查我的代码吗？ Thank you 谢谢

Here is the fiddle site if you want to test: http://jsfiddle.net/66QYr/ 如果你想测试，这里是小提琴网站： http ： //jsfiddle.net/66QYr/

I would like to have the first 3 text to appear on the left (vertically) and then the next 3 text appear on the right (vertically) then the next 2 text appear on the lower right bottom (vertically) and the last 2 text appear on the lower left bottom (vertically) 我希望前三个文本显示在左侧（垂直），然后接下来的三个文本显示在右侧（垂直），然后下一个2文本显示在右下方（垂直），最后两个文本出现在左下角（垂直）

http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic001.png 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

There are two problems you're trying to solve here: 您在此尝试解决两个问题：

Positioning the text in the appropriate places 将文本放在适当的位置
Getting them to fade in 让它们淡入

Step One 第一步

The first problem can be solved with some simple CSS. 第一个问题可以通过一些简单的CSS来解决。 Start out with a container: 从容器开始：

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

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

The width and height can be anything, but you do have to tell it something . 宽度和高度可以是任何东西，但你必须告诉它一些东西 。 We're going to be putting our text in this container, but then use position:absolute . 我们将把我们的文本放在这个容器中，但是然后使用position:absolute 。 This will take them out of the normal document flow, and collapse the container if we have told it an explicit height. 这将使他们脱离正常的文档流程，如果我们告诉它明确的高度，则折叠容器。

The next step is the text. 下一步是文本。 You're going to want four divs, with the text inside as paragraphs: 你将需要四个div，文本里面是段落：

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

Do this for each of the four blocks of text that you want to have. 为您想要的四个文本块中的每一个执行此操作。 Use the same class name on each one, but give each their own, unique ID ( text2 , text3 , etc.). 在每个名称上使用相同的类名，但为每个名称分配一个唯一的ID（ text2 ， text3等）。

Finally, just use (as I said earlier) absolute positioning to place them where you'd like: 最后，只需使用（如前所述）绝对定位将它们放在您喜欢的位置：

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

...and so on. ...等等。 When you're done, you should have something that looks like this: 当你完成后，你应该有这样的东西：

四个绝对定位的div

Step Two 第二步

Fading elements in requires animation. 褪色元素需要动画。 You kind of have a basic animation function, but I suggest you read Robert Penner's article on tweening and animation. 你有一个基本的动画功能，但我建议你阅读Robert Penner关于补间和动画的文章。 It was written for ActionScript, but the exact same principles apply. 它是为ActionScript编写的，但完全相同的原则适用。

For now, here's a good general-purpose JavaScript method that will take an element and fade it in: 现在，这是一个很好的通用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);
}

You tell this function how long you want the animation to last (in milliseconds ), and you can also give it a function to execute when the fading is done (if you want; it's not necessary). 你告诉这个函数你希望动画持续多长时间（以毫秒为单位 ），你还可以给它一个在淡入淡出时执行的函数（如果你想要的话;它没有必要）。

If I understood your question correctly, you want all the texts to start invisible, and then fade in, one at a time, clockwise from the top. 如果我正确地理解了你的问题，你希望所有文本开始不可见，然后逐渐淡入，从顶部顺时针方向淡入。 We can make them invisible with CSS, but then if the user has JS disabled, the page will appear blank. 我们可以使用CSS隐藏它们，但是如果用户禁用了JS，页面将显示为空白。 So you need to first "get" all of the elements (either with some kind of getByClass function or with four different calls to getElementById ) and set their opacity to 0. 因此，您需要首先“获取”所有元素（使用某种getByClass函数或对getElementById进行四次不同的调用）并将其不透明度设置为0。

So you can make the first group of texts fade in by doing the following: 因此，您可以通过执行以下操作使第一组文本淡入：

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

The problem is, by doing this, there's no way to tell when to start the next animation. 问题是，通过这样做，没有办法告诉何时开始下一个动画。 So we need to make a function, with the help of closures, to help keep track of things (this assumes that you've already gotten the elements in JS and made them invisible): 因此，我们需要在闭包的帮助下创建一个函数来帮助跟踪事物（这假设您已经获得了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;
        }
    };
}());

This function cycles through each element and fades it in when the previous one is done. 此函数循环显示每个元素，并在前一个元素完成时将其淡入。 (It's okay if the code doesn't make a lot of sense; closures are tricky things.) （如果代码没有多大意义，那就没关系;闭包很棘手。）

Here is the final result, in JSFiddle. 这是JSFiddle的最终结果。 Good luck. 祝好运。

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

问题描述

1 个解决方案

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

Step One 第一步

Step Two 第二步

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

问题描述

1 个解决方案

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

Step One 第一步

Step Two 第二步

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