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

发布于 2024-09-25 03:13:18 字数 400 浏览 4 评论 0原文

我想通过 jQuery 从文本文件（随机）加载 textString。首先，文本应淡入，然后停留 3 秒，然后再次淡出，然后文本链接应淡入 3 秒。然后站起来停下来（不再改变）。两个文本应出现在同一个

中。

TextFileExample：

TextString 1
TextLink 1

TextString2
TextLink2

TextString3
TextLink3
.
.

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

textFile 是 .txt 或 .xml 文件 - 哪个更容易。

原文

I would like to load a textString from a text file (randomly) via jQuery. At first the text should fadeIn, then stand for 3 sec., then fadeOut again, then a the textLink should fadeIn for 3 sec. and stand and stop (no more changing). Both text should appear in the same <div>.

TextFileExample:

TextString 1
TextLink 1

TextString2
TextLink2

TextString3
TextLink3
.
.

There are about 20 parts of text (textString and textLink). On each webpage reload the text and the link should be randomly changed.

The textFile is a .txt or .xml file - whatever is easier.

分享到QQ

分享到微博

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

发布评论

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

无妨# 2024-10-02 03:13:18

对于这种情况，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');
    }
  });
});

查看它在这个 jsFiddle （当然没有 Ajax 调用）。

XML/HTML is simpler somewhat to handle for this scenario. For example, you could stay HTML compliant, and within your string/link metaphor (you can choose any other layout you like, though):

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

And in your target page:

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

And JavaScript along the lines of:

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

See it working in this jsFiddle (without the Ajax call of course).

回复收藏 0 原文

故事↓在人 2024-10-02 03:13:18

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

这是我的工作版本，带有 XML 重排：

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>

非常有帮助

Thank you for your response... you helped me!

Heres my working version with a XML redout:

The HTML CODE:

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

and the XML file code:

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

Great help

回复收藏 0 原文

~没有更多了~