Как автоматически прокрутить div (по горизонтали), который содержит простой текст? - PullRequest
Новая
       28

Как автоматически прокрутить div (по горизонтали), который содержит простой текст?

0 голосов
/ 22 апреля 2011

Пожалуйста, потерпите меня здесь! Я ознакомился с основами HTML и решил, что веб-программирование станет моей профессией. Я записался на программу и сейчас пишу свой первый живой проект в четвертом семестре. Наши занятия в основном связаны с .NET Framework, и я очень незнаком с Javascript и программированием на стороне клиента в целом.

Надеюсь, я обрисую эту информацию достаточно, чтобы дать замечательным членам этого сообщества шанс помочь начинающему разработчику.

Цель: прокрутить div, содержащий простой текст, по горизонтали на странице до бесконечности. Среда: Windows-сервер работает под управлением ASP.NET 4.0. Язык: C # / XHTML / Javascript Используемые инструменты: jQuery, jQueryTools, SmoothDivScroll

Я пытался использовать плагин jQuery, известный как SmoothDivScroll, а также jQueryTools, чтобы выполнить мою задачу, однако, из-за отсутствия опыта на стороне клиента, я не добился абсолютно никакого успеха.

Моя веб-страница доступна по адресу http://paysonfirstassembly.com/, и у div, который я пытаюсь прокрутить, есть класс и идентификатор scrollingPanel.

Я могу предоставить пример кода, если это поможет.

-Taylor

Ответы [ 3 ]

2 голосов
/ 22 апреля 2011

У Реми Шарпа есть хорошая реализация jQuery Marquee здесь с некоторыми демонстрациями .Это позволяет вам делать 

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

, а затем 

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

с включенным в него плагином.

2 голосов
/ 22 апреля 2011

Это, кажется, соответствует вашим потребностям: 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>

См. эту страницу исходный код длябольше функций и настроек

1 голос
/ 22 апреля 2011

Оберните ваш текст в шатер, как этот 

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

Хотя лично я НЕ РЕКОМЕНДУЮ этого решения. Но это будет работать на ваш проект колледжа, как шарм. Не требует никаких внешних скриптов.

...