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

Question

Please bear with me here! I familiarized myself with basic HTML and decided web programming would be my occupation. I enrolled in a program and am now writing my first live project in my fourth semester. Our classes deal mainly in the .NET Framework and I am very unfamiliar with Javascript and client-side programming in general.

Hopefully I outline this information enough to give the great members of this community a chance to help a budding developer.

Objective: Scroll a div containing plain text horizontally across a page indefinitely Environment: Windows server running ASP.NET 4.0. Language: C#/XHTML/Javascript Tools Used: jQuery, jQueryTools, SmoothDivScroll

I have attempted to use a jQuery plugin known as SmoothDivScroll as well as jQueryTools to execute my objective, however, with my lack of client-side experience, I have had absolutely no success.

My webpage is available at http://paysonfirstassembly.com/ and the div that I am attempting to scroll has a class and ID of scrollingPanel.

I can provide sample code if it will help.

-Taylor

Answer 1

This seems to fit your needs: 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
    });


});

your HTML should be like this:

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

See this page source code for more functions and tweaks

Answer 2

Remy Sharp has a good jQuery Marquee implementation here with some demos . This allows you to do

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

and then

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

with his plug-in included.

Answer 3

Wrap your text in marquee tag like this

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

Though, I personally DO NOT RECOMMEND this solution. But it will work for your college project like charm. It doesn't need any external scripts.