Vertical scroll при помощи Javascript
Часто попадаются блоки рекламы, где текст, прокручивается вертикально. Для того чтобы сделать такой блок можно использовать несколько технологий: Flash, Silverlight, Javascript. Для решения своей задачи я использовал Javascript. Из плюсов можно выделить то, что нет необходимости ставить дополнительные плагины.
В качестве вспомогательного Фреймворка был выбран jQuery. Это поможет решить проблему кроссбраузерности.
Необходимо показывать текстовые сообщения (ссылки, рисунки) в блоке определенной ширины. Сообщения должны отображаться по очереди. Цикл отображения не ограничен временными интервалами.
В качестве вариантов решения я рассматривал следующие:
При использовании первого варианта были замечены следующие недостатки: где то после пятой итерации блок начал «плыть», то есть возникла необходимость в коррекции; данные, которые уже были показаны, остаются в блоке, хотя они там уже не нужны. Как результат через небольшой промежуток времени браузер начинает «подтормаживать».
Вариант номер два уже лучше. Нет бессмысленного хранения данных, но блок по прежнему «плывет».
Вариант номер три и стал решением поставленной задачи.
Код на Javascript:
Подключение и инициализация:
Результат работы можно посмотреть тут
Скачать исходные коды можно по этой ссылке
Надеюсь это решение будет полезно.
В качестве вспомогательного Фреймворка был выбран jQuery. Это поможет решить проблему кроссбраузерности.
Задача
Необходимо показывать текстовые сообщения (ссылки, рисунки) в блоке определенной ширины. Сообщения должны отображаться по очереди. Цикл отображения не ограничен временными интервалами.
Возможные варианты решений
В качестве вариантов решения я рассматривал следующие:
- На каждом шаге добавлять в конец блока текст, который уже был отображен. Таким образом, список будет увеличиваться, но никогда не закончится.
- Отображать список сообщений по очереди и в момент отображения последнего сообщения прокручивать его сначала. Это получится такой себе зацикленный список.
- В блоке, для отображения сообщений хранить только текущее сообщение и следующее. На каждом шаге обновлять список.
Достоинства и недостатки предложенных вариантов
При использовании первого варианта были замечены следующие недостатки: где то после пятой итерации блок начал «плыть», то есть возникла необходимость в коррекции; данные, которые уже были показаны, остаются в блоке, хотя они там уже не нужны. Как результат через небольшой промежуток времени браузер начинает «подтормаживать».
Вариант номер два уже лучше. Нет бессмысленного хранения данных, но блок по прежнему «плывет».
Вариант номер три и стал решением поставленной задачи.
Реализация
Код на Javascript:
var scrollerstep = 1;
var lefttime = 0;
var scroll_interval=5000;
var scroll_speed=50;
var part = 1;
var step = 50;
var delta = 0;
var delta_d = 1;
var correct = 0;
var step_l = 0;
var scrol__data = new Array();
var scroll_text_id = 'scroll_text';
var scroll_text_class = 'scroll_data';
function scroll_add(str) {
scrol__data[scrol__data.length] = str;
}
function set_Interval(interval){
scroll_interval = interval;
}
function set_Speed(speed){
scroll_speed = speed;
}
function runScroll() {
if (part > scrol__data.length - 1) {
$('#'+scroll_text_id).css('top', '0px');
$('#'+scroll_text_id).attr('innerHTML', '');
$('#'+scroll_text_id).append('<p class="'+scroll_text_class+'">' + scrol__data[scrol__data.length - 1] + '</p>');
part = 0;
}
if (part != 0) {
$('#'+scroll_text_id).css('top', '0px');
$('#'+scroll_text_id).attr('innerHTML', '');
$('#'+scroll_text_id).append('<p class="'+scroll_text_class+'">' + scrol__data[part - 1] + '</p>');
}
var c_data = '<p class="'+scroll_text_class+'">' + scrol__data[part] + '</p>';
part = part + 1;
step_l = 0;
$('#'+scroll_text_id).append(c_data);
lefttime = setInterval("scrollText()", scroll_speed);
}
function scrollText() {
currstop = parseInt(-1 * (step) - delta);
if (parseInt(step_l) >= currstop) {
nextval = parseInt($('#'+scroll_text_id).css('top')) - scrollerstep + 'px';
step_l = step_l - scrollerstep;
$('#'+scroll_text_id).css('top', nextval);
} else {
window.clearInterval(lefttime);
}
}
function scroll_run(){
$('#'+scroll_text_id).append('<p class="'+scroll_text_class+'">' + scrol__data[0] + '</p>');
setInterval("runScroll()", scroll_interval);
}
Подключение и инициализация:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vertical scroll</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<style type="text/css">
.scroll_data{
display:block;
height:50px;
margin:0px;
padding:0px;
vertical-align:middle;
}
.scroll_block{
position:relative;
top:50px;
border:1px solid #DDDDDD;
width:400px;
height:50px;
overflow:hidden;
}
.scroll_text{
position:absolute;
right:0px;
top:0px;
width:100%;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
set_Interval(3000);
set_Speed(30);
scroll_add('string1');
scroll_add('string2');
scroll_add('string3');
scroll_add('string4');
scroll_add('string5');
scroll_add('string6');
scroll_run();
});
</script>
<div class="scroll_block">
<div id="scroll_text" class="scroll_text">
</div></div>
</body>
</html>
Результат
Результат работы можно посмотреть тут
Скачать исходные коды можно по этой ссылке
Надеюсь это решение будет полезно.
комментарии (11)