Автоматическая вертикальная прокрутка содержимого div с зацикливанием
-
21-09-2019 - |
Вопрос
Я пытаюсь найти простой способ создать 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().И клонируйте элемент, который вы хотите прокрутить.Когда первый элемент окажется в последней точке прокрутки, поместите дублированный элемент после первого элемента.И когда этот дублированный элемент будет почти в конце, поместите оригинал после дубликата и так далее!