Question

我想通过jQuery从文本文件（随机）加载textString。首先文本应该淡入，然后站立3秒，然后再次淡出，然后textLink应该淡入3秒。并且站立和停止（不再变化）。两个文本都应出现在同一<div>。

中

TextFileExample：

TextString 1
TextLink 1

TextString2
TextLink2

TextString3
TextLink3
.
.

大约有20个部分的文字（textString和textLink）。在每个网页上重新加载文本，链接应随机更改。

textFile是一个.txt或.xml文件 - 无论更简单。

Answer 1

对于这种情况，XML / HTML在某种程度上更容易处理。例如，你可以保持HTML兼容，并在你的字符串/链接隐喻中（你可以选择你喜欢的任何其他布局）：

<div>
  <a href="TextLink 1">TextString 1</a>
  <a href="TextLink 2">TextString 2</a>
  <!-- ... -->
</div>

在目标网页中：

<div id="textDisplay"></div>

和JavaScript一样：

$(function () {
  // random function is from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html
  function randomXToY(minVal,maxVal) {
    var randVal = minVal+(Math.random()*(maxVal-minVal));
    return Math.round(randVal);
  }

  // get the HTML and handle it when ready (i.e. everything
  // happens in the Ajax callback)
  $.get("texts.html", function(html) {
    var $found = $(html).find("a");

    if ($found.length > 0) {
      var a = $found[randomXToY(0,$found.length-1)];
      var t = $(a).text();
      var h = $(a).attr("href");

      $("#textDisplay")
      .hide()
      .text(t)
      .fadeIn('fast')
      .delay(3000)
      .fadeOut('fast', function() { $(this).text(h); } )
      .fadeIn('fast');
    }
  });
});

在this jsFiddle中查看它（当然没有Ajax调用）。

Answer 2

感谢您的回复......您帮助了我！

继承我的工作版本，带有XML redout：

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>XML readout and text animation</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    //This script does the following
    //It shows and hides some XML test. The first output ist normal text, the second output is a weblink.
    //The first text fadesOut after some time and the second text fadesIn and stops. No more fading.
    //On each refresh there is only one random text selected from the XML file.


    // Set values for max and min - how many XML id in file linkData.xml
    var maxVal = 2;
    var maxMin = 0;

    //Read the XML file. Get random var from val max-min. Read only one ID from XML file. Then pass values to function animateOutput
    $.get('linkData.xml', null, function (data, textStatus) {

            var whatID = Math.round((Math.random()*(maxVal-maxMin)));

            var ausgabeText = ( $(data).find('ethLinks [id='+whatID+'] title').text());
            var ausgabeLink = ( $(data).find('ethLinks [id='+whatID+'] titleLink').text());
            var ausgabeURL = ( $(data).find('ethLinks [id='+whatID+'] url').text());

            animateOutput(ausgabeText,ausgabeLink,ausgabeURL);
    }, 'xml');

    //Gets values from XML readout and animates text.
    function animateOutput(ausgabeText,ausgabeLink,ausgabeURL) {

    $("#textDisplay")
          .hide()
          .text(ausgabeText)
          .fadeIn('fast')
          .delay(3000)
          .fadeOut('fast', function() { $(this).html('<a href="'+ ausgabeURL + '"target="_self" title="Sehen Sie die Arbeiten für: ' + ausgabeLink + '">' + ausgabeLink + '</a> und E,T&H.'); } )
          .fadeIn('fast');   
    }

</script>
</head>
<body>
    <div id="textDisplay"></div>
</body>
</html>

和XML文件代码：

<?xml version="1.0" encoding="iso-8859-1"?>
 <ethLinks>
   <link id="0">
     <title>Am Bodensee sind wir ganz in unserem Element.</title>
     <titleLink>Badhütte Rorschach</titleLink>
     <url>http://www.apple.com</url>
   </link>

   <link id="1">
     <title>Manchmal möchte man in die Luft gehen.</title>
     <titleLink>Ballonclub Alpenrheintal</titleLink>
     <url>http://www.orf.at</url>
   </link>

   <link id="2">
     <title>Auf öde Konferenzäume pfeifen wir.</title>
     <titleLink>CONDFERENCE ARENA</titleLink>
     <url>http://www.dell.com</url>
   </link>
 </ethLinks>

很好的帮助

Jquery - 使用fadeIn加载文本，在5000之后更改文本并保持静止。随机选择文字

2 个答案: