Автоскрол для блока. ООП
Всем здравствуйте. Проблем с кодом вроде нет, просто нужно обсудить и оптимизировать
Задача такая - на странице есть блоки и для некоторых из них нужно сделать автоскролл контента с разной для каждого блока скоростью, также при наведении курсора скролл должен останавливаться. Также скролл может быть как горизонт так и вертикал. Решил эту задачу так (писал на TypeScript, но даю исходник на JS)
var Scroll = (function () {
function Scroll(elem, speed) {
this.flag = true;
this.elem = document.querySelector(elem);
this.computedStyle = getComputedStyle(this.elem);
var th = this;
// Если overflowY == "scroll" то запускаем метод вертикального скролла иначе горизонт
setInterval(function () { if (th.computedStyle.overflowY == "scroll") {
th.scrollVertical();
} else {
th.scrollHorizontal();
} }, speed);
// Переключаем флаг наведение курсора
this.elem.onmouseenter = function () { th.flag = false; };
this.elem.onmouseleave = function () { th.flag = true; };
}
// Метод для вертикального скролла
Scroll.prototype.scrollVertical = function () {
if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
this.elem.scrollTop = this.elem.scrollTop + 1;
if (this.elem.scrollTop >= (this.elem.scrollHeight - this.elem.clientHeight)) {
this.elem.scrollTop = 0;
return;
}
};
// Метод для горизонтального скролла
Scroll.prototype.scrollHorizontal = function () {
if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
this.elem.scrollLeft = this.elem.scrollLeft + 1;
if (this.elem.scrollLeft >= (this.elem.scrollWidth - this.elem.clientWidth)) {
this.elem.scrollLeft = 0;
return;
}
};
return Scroll;
}());
new Scroll("#text-vat", 100); // Указывается два параметра - селектор и скорость движения
Есть парочка вопросов Первый - событие наведение курсора - можно ли объединить две строки в одну - как в jQuery сделано через .hover() ??
this.elem.onmouseenter = function () { th.flag = false; };
this.elem.onmouseleave = function () { th.flag = true; };
Второй - можно ли два метода scrollVertical() и scrollHorizontal() объединить - ведь делают они почти одно и тоже только один работает с высотой и топ, а второй с шириной и лефт. Буду признателен за участие |
Bond,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 200px; width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="hot"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Sedulo, inquam, faciam.</i> Quorum altera prosunt, nocent altera. Duo Reges: constructio interrete. Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Etenim semper illud extra est, quod arte comprehenditur. <i>Eam stabilem appellas.</i> </p></div>
<script>
var Scroll = (function () {
function Scroll(elem, speed) {
this.flag = true;
this.elem = document.querySelector(elem);
this.computedStyle = getComputedStyle(this.elem);
var th = this;
// Если overflowY == "scroll" то запускаем метод вертикального скролла иначе горизонт
setInterval(function () { if (th.computedStyle.overflowY == "scroll") {
th.move('Top','Height');
} else {
th.move('Left','Width');
} }, speed);
// Переключаем флаг наведение курсора
this.elem.onmouseenter = function () { th.flag = false; };
this.elem.onmouseleave = function () { th.flag = true; };
}
// Метод для скролла
Scroll.prototype.move = function (a,b) {
if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
this.elem["scroll"+a]++;
if (this.elem["scroll"+a] >= (this.elem["scroll"+b] - this.elem["client"+b])) {
this.elem["scroll"+a] = 0;
return;
}
};
return Scroll;
}());
new Scroll(".hot", 30); // Указывается два параметра - селектор и скорость движения
</script>
</body>
</html>
|
Bond,
this.elem.onmouseenter = this.elem.onmouseleave = function () { th.flag = !th.flag };
|
рони,
Rise, Спасибо за участие, добавил в карму плюсиков. :) Метод move() просто и понятно - но не хватило мне ума дойти к этому. За ховер отдельное спасибо, не знал что так можно, хотя вроде как читал недавно, но примеров не видел. Да пересидел что называется на jQuery, без справочника и гугла никак :). |
Move можно ещё оптимизировать:
move = function() {
if(this.flag && ++this.elem["scroll"+a] >= this.elem["scroll"+b] - this.elem["client"+b]) {
this.elem["scroll"+a] = 0;
}
}
|
Ruslan_xDD, спасибо. Пошла оптимизация оптимизации.:)
Скоро допишемся что останется 3 строки всего кода :) |
Цитата:
|
| Часовой пояс GMT +3, время: 12:23. |