第一步

Question

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

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

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

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

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

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在有序列表中显示文本

1 个答案:

第一步

第二步