Question

请在这里忍受我！我熟悉基本的HTML，并决定网络编程将是我的职业。我参加了一个项目，现在我正在第四学期写下我的第一个现场项目。我们的课程主要涉及.NET Framework，我对Javascript和客户端编程一般都不熟悉。

希望我能够概述这些信息，足以让这个社区的优秀成员有机会帮助一个初露头角的开发者。

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

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

我的网页位于http://paysonfirstassembly.com/，我尝试滚动的div的类和ID为scrollingPanel。

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

-Taylor

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>

有关更多功能和调整，请参阅this page源代码

Answer 2

Remy Sharp有一个很好的jQuery Marquee实现here和some demos。这允许你做

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

然后

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

包含他的插件。

Answer 3

将文字包裹在这样的字幕标签中

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

虽然，我个人不建议这个解决方案。但它会像魅力一样适用于你的大学项目。它不需要任何外部脚本。

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

3 个答案: