如何使用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