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

发布于 2024-11-06 02:30:28 字数 1984 浏览 0 评论 0原文

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

如果您想测试的话，这是小提琴网站： 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>

原文

Could someone please check my code? Thank you

Here is the fiddle site if you want to test:
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)

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"> </div>

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



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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千鲤 2024-11-13 02:30:28

这里您要尝试解决两个问题：

将文本放置在适当的位置
中淡出

让它们在第一步

第一个问题可以通过一些简单的 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 的文章补间和动画。它是为 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 中。祝你好运。

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. 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. 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 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.).

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:

four absolutely positioned divs

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. It was written for ActionScript, but the exact same principles apply.

For now, here's a good general-purpose JavaScript method that will take an element and fade it in:

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. 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.

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):

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. Good luck.

回复收藏 0 原文

~没有更多了~