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

有人能查一下我的密码吗？多谢各位

如果您想测试，请访问fiddle站点：

我想让前3个文本显示在左侧（垂直） 然后接下来的3个文本出现在右侧（垂直） 接下来的两个文本显示在右下角的底部（垂直） 最后两个文本显示在左下角底部（垂直）

丁丁
#丁丁{
位置：相对位置；
顶部：211px；
左：12px；
字号：14pt；
字体大小：粗体；
字体系列：Calibri；
颜色：红色；
过滤器：alpha（不透明度=0）；
不透明度：0；}
.形象{
高度：350px；
宽度：855px；}
变量txt=['text1'、'text2'、'text3'、'text4'、'text5'、'text6'、'text7'、'text8'、'text9'、'text10']，初始值=0，i=0，k=0，速度=20，el；
var循环计数=1000；
var j=0；
//var-padd=20//将其设置为适当的增量
函数fade（）{
init==0？i++:i--；
el.filters？el.style.filter='alpha（不透明度='+i+'）'：el.style.opacity=i/100；
el.firstChild.nodeValue=txt[k]；
如果（i==100）init=1；
如果（i==0）{init=0；k++；j++；
el.style.paddingLeft=20*k；
}
如果（k==txt.length）k=0；
如果（j这里有两个问题需要解决：

将文本放置在适当的位置
让他们淡入
第一步
第一个问题可以通过一些简单的CSS解决。从容器开始：

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

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

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

最后，只需使用（正如我前面所说的）绝对定位将它们放置在您想要的位置：

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

…等等。完成后，您应该有如下内容：


第二步
在中淡入淡出元素需要动画。您可能有一些基本的动画功能，但我建议您阅读tweening和动画。它是为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中获取了元素并使其不可见）：

此函数循环遍历每个元素，并在上一个元素完成后淡入（如果代码没有太多意义，则可以；闭包是很棘手的事情）

祝你好运。
你应该为这些区域中的每一个创建一个插件，并使用CSS将它们的位置设置为这样。Javascript在这个问题中起着很小的作用。检查这个插件@eduardocereto:那么js在这里是不可能的？
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);
}

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

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;
        }
    };
}());