Question

我目前有一个加载屏幕，用于找到garry的mod服务器在这里 - http://osng.co/Stuff/Gmod/Server.php?steamid=76561198032735356 我想知道如何在http://moronyard.com/explorer/loading/

上看到的右侧内容框中添加文本滚动

请记住我只知道一些关于html，js和php的内容。所有的帮助都得到了应对。

Answer 1

要使用滚动文字，您只需使用html marquee，如下所示：

＆＃13;

marquee{height:100px;
}

＆＃13;

<marquee behavior="scroll" direction="down" scrollamount="1">
  this text will scroll down....... this text will continuously scroll down... 
</marquee>

＆＃13;

或者你可以像这样使用jquery prepend：

＆＃13;

var i=0;

/**Run a timer that will append an items every 3seconds**/
var myInterval = setInterval(function(){
  i++;
  $('#container').prepend("<p>this is item number "+i+"</p>");
  
  if(i== 7)
    {
      $('#container').prepend("<p>successfully loaded 7 items</p>");
       stopMyTimer()
    }
      
    
}, 3000);

/**after you have loaded all your items, call this function to stop the timer**/
function stopMyTimer()
{
   clearInterval(myInterval);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div>

＆＃13;

Answer 2

拼写文字更容易。 html看起来像这样。我们需要一个包装，其位置相对和高度等于你想要的任何东西。然后我们需要子元素，它将是被移动的元素。然后我们需要至少一个元素来包含文本，但如果你想要可以有更多。此外，行高需要设置为外包装器的高度。

<div id="scrolltextup" style="border:1px ridge #004F72; overflow:hidden;
     position:relative; width:500px; height:20px;">
  <div id="textup" style="text-align:center; position:absolute; top:0;
      left:0; width:500px;">
    <div style="line-height:20px;">
      +++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      +++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

这是javascript来做到这一点。我们得到整个事物的高度。这次我们改变了＃34; top＆＃34;属性。由于到动画的距离总是相同的，我们不需要计算持续时间，只能通过持续时间。

var scrollheight = $("#textup").height();

function scrolltextup(dur){
  $("#textup").animate({"top":"-=20"},{
    duration: dur,
    easing: "linear",
    complete:function(){
      $("#textup").children(":last").after("<div style='line-height:20px;'>"+
          $("#textup").children(":first").html()+"</div>");
      if($("#textup").children(":first").height() <=
           (parseInt($("#textup").css("top"))*-1)){
        $("#textup").children(":first").remove();
        $("#textup").css({"top":0});
      }
      setTimeout("scrolltextup(3000)", 500);
    }
  });
}

滚动文本帮助（HTML）

2 个答案: