Автоматическая прокрутка страницы вниз по таймеру
Автор Макс ПуляВ этой статье опубликован рабочий код автоматической прокрутки страницы вниз и автоматическая загрузка следующей страницы, и все это с задаваемым интервалом времени. Как применять данный код уже решает каждый сам. Можно использовать только часть кода, например.
Недавно передо мной встала задача автоматической загрузки сайта, прокрутки его до конца и загрузки другого сайта или следующей страницы. А потом цикл должен повторяться. Таким образом, у меня получилось 10 локальных HTML документов (страниц), которые последовательно загружаются. А последний возвращает на первый HTML документ.
Для загрузки следующего документа я использовал Meta тег:
<meta http-equiv="refresh" content="50;2.html">
Где content="50; - это время в секундах до загрузки следующего документа, 2.html" - это адрес документа, находящегося локально в папке на компьютере.
Мне нужно было, чтобы документ открывался локально в браузере, а с помощью iframe загружалась уже определенная страница сайта, который находится на хостинге. Iframe простой:
<iframe src="https://epicblog.net" width="100%" height="1300" scrolling="no"></iframe>
Этот айфрейм должен быть в диве id="block", ну и немного красоты, получаем:
<div style="height:700px;border:1px solid black;position:relative;overflow:hidden;">
<div id="block" style="left:0px;right:0px;top:0px;position:absolute;">
<iframe src="https://epicblog.net" width="100%" height="1300" scrolling="no"></iframe>
</div></div>
Также нужно добавить скрытую кнопку прокрутки страницы вниз, которая открывается в iframe:
<img src="/" alt="" onMouseover="move('block',-5)" onMouseout="clearTimeout(move.to)">
Ну и наконец скрипт:
<script>
function move(id,spd) {
var obj=document.getElementById(id);
var max=-obj.offsetHeight+obj.parentNode.offsetHeight;
var top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },120); //скорость автоматической прокрутки вниз
}
else obj.style.top=(spd>0?0:max)+"px";
}
function go() { move('block',-5); }
setTimeout(go, 8000); //время через которое начнется автоматическая прокрутка вниз
</script>
По этой ссылке можете скачать демо из двух страниц с кодом автоматической прокрутки. Конечно же, нужно будет изменить данные на свои, а также указать верное значение высоты страницы.
Всем удачи и добра!
Макс Пуля
Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры