Автоматическая вертикальная прокрутка содержимого div с зацикливанием

StackOverflow https://stackoverflow.com/questions/1948707

Вопрос

Я пытаюсь найти простой способ создать div с простым текстом в нем, автоматически прокручивая текст по вертикали.Я не хочу использовать фреймворк (хотя я использую Prototype, так что если проще использовать Prototype, то это нормально, но не Scriptalicious).

Я предполагаю, что должен быть способ сделать это с помощью нескольких строк кода, но я недостаточно знаком с Javascript, чтобы знать, как наиболее эффективно это сделать.

Это было полезно?

Решение

Это может быть необычно, но вы можете попробовать <marquee> тег

это работает как в IE, так и в FF, и, когда я проверял в последний раз, safari тоже.

<marquee behavior="scroll" direction="up" height="250" 
   scrollamount="2" scrolldelay="10"">
  Your content goes here
</marquee>

должен дать тебе то, что ты хочешь,
и вы можете оформить их как любой другой <div>...
и еще есть дополнительное преимущество в отсутствии javascript...

Отредактируйте в ответ на ваш комментарий

Это становится лучше, попробуйте это в любом браузере

onmouseover="this.stop()" onmouseout="this.start()"

И это в IE

style="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=0,
FinishOpacity=100, 
Style=1, StartX=0,  FinishX=0, StartY=0, FinishY=10) 
progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0, 
Style=1, StartX=0, FinishX=0, StartY=90, FinishY=100)" 

В качестве атрибутов тега marquee...

Другие советы

function scrollDivUp(id){
    document.getElementById(id).scrollTop-=1
    timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

может быть, попробуем что-нибудь подобное.

вы также можете изменить .scrollTop-=1 на .scrollTop+=1 для прокрутки в другую сторону.

Вам также понадобится прокручиваемый div, что можно сделать, ограничив размер и установив свойство overflow style, ie.style="ширина: 200 пикселей;высота: 300 пикселей;переполнение: автоматическое"

Попробуйте изменить div Вершина прокрутки.Вот такой пример здесь.

Я вижу, что правильный ответ еще не дан.Я думаю, вам нужно посмотреть, например, на cloneNode().И клонируйте элемент, который вы хотите прокрутить.Когда первый элемент окажется в последней точке прокрутки, поместите дублированный элемент после первого элемента.И когда этот дублированный элемент будет почти в конце, поместите оригинал после дубликата и так далее!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top