如何自动滚动包含纯文本的 div（水平）？

Question

在此请多多包涵！我熟悉了基本的 HTML，并决定将 Web 编程作为我的职业。我报名了一个项目，现在正在第四学期编写我的第一个现场项目。我们的课程主要涉及 .NET Framework，我一般对 Javascript 和客户端编程非常不熟悉。

希望我概述的这些信息足以让这个社区的优秀成员有机会帮助崭露头角的开发人员。

目标：在页面上无限期地水平滚动包含纯文本的 div 环境：运行ASP.NET 4.0的Windows服务器。 语言：C#/XHTML/Javascript 使用的工具：jQuery、jQueryTools、SmoothDivScroll

我尝试使用名为 SmoothDivScroll 的 jQuery 插件以及 jQueryTools 来执行我的目标，但是，由于我缺乏客户端经验，我完全没有成功。

我的网页位于 http://paysonfirst assembly.com/ ，我尝试滚动的 div 有一个类和滚动面板的 ID。

如果有帮助的话我可以提供示例代码。

——泰勒

Answer 1

这似乎满足您的需求： http://plugins.jquery.com/project/jqScroller

<style type="text/css">

  /* CSS for the scrollers */
  #scrollingPanel{
    position:relative;
    height:24px;
    width:500px;
    display:block;
    overflow:hidden;
    border:#CCCCCC 1px solid;
  }

  .scrollingtext{
      position:absolute;
      white-space:nowrap;
  }
</style>

$(document).ready(function() {

    //create a horizontal scroller
    $('#scrollingPanel').SetScroller({
        velocity: 80,
        direction: 'horizontal'
        //more tweaks on the source code of plugin page
    });


});

您的HTML 应如下所示：

<div id="scrollingPanel">
    <div class="scrollingtext">
        Making a Difference in People
    </div>
</div>

请参阅此页面源代码以了解更多功能和调整

Answer 2

Remy Sharp 有一个很好的 jQuery Marquee 实现这里，其中 一些演示。这允许你做

<div class='marquee'>Scroll this</div>

然后

$('.marquee').marquee();

用他的插件包含。

Answer 3

像这样将文本包裹在选框标签中

<div class="scrollingPanel">
    <marquee>Making a Difference in People</marquee>
</div>

尽管如此，我个人不推荐此解决方案。但它会像魅力一样对你的大学项目有用。它不需要任何外部脚本。