自动滚动 HTML 以呈现滚动新闻的印象

• 下载 Guide_lines_and_sample_code.zip - 2.0 KB

引言

这篇文章是关于在 div 或面板中使 HTML 内容自动滚动或自滚动，以获得类似垂直滚动新闻快讯的印象。 如果您稍微修改代码，您可以使用 javascript 和滚动新闻来实现许多不同的效果，例如水平滚动或在新窗口中弹出。 可以使用这篇文章非常简单地实现这一点。

背景

您可以将这篇文章与使用 C# 在 ASP.NET 中动态 HTML 代码生成结合起来，以便您可以灵活地从数据库或 XML 动态设置新闻。 我已将动态 HTML 代码生成示例代码与本文一起附上。 您可以下载并使用它。

使用代码

只需浏览本文附带的代码。 示例代码将很容易让您理解它的作用。

<script type="text/javascript">
   var speed=10
<!--
function rollon()
{
//'myDiv' is the name of my panel .
//panel  properties are as follows
//<asp:Panel ID="myDiv" runat="server" style="overflow:hidden;" width="100%" Height="100%" ScrollBars=None >
 // </asp:Panel>
  var loc = document.getElementById('myDiv');
  var div = document.getElementById('myDiv');
  h = div.scrollHeight;
  if(speed > (h-350))
  {
   speed =10;
  }
  div.scrollTop = speed;
// increment the speed by higher number to increase the scrolling
  speed=speed+1;
// set timeout will help you to continuosly scroll the function and give continuos scrolling.
  self.setTimeout('rollon()', 50)// 50 is the timer value. 1000 is one second 
}
-->
</script>

关注点

我真的觉得使用 javascript 在我们的网站中实现不同的效果很简单也很容易。 这只是一个开始，我会用更好更有趣的内容回来。

历史

我的第一篇帖子。 会用简单而有用的文章回来。