class
Roll {
constructor(opts) {
this.elem = opts.elem;
this.elemBox = opts.elemBox;
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
if
(this.direction ===
'top'
|| this.direction ===
'left'
){
this.speed = -1;
}
else
{
this.speed = 1;
}
}
roll(){
switch
(this.direction) {
case
"top"
:
if
(Math.
abs
(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}
else
{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed +
'px'
;
}
break
;
case
"bottom"
:
if
(Math.
abs
(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}
else
{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed +
'px'
;
}
break
;
case
"left"
:
if
(Math.
abs
(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}
else
{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed +
'px'
;
}
break
;
case
"right"
:
if
(Math.
abs
(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}
else
{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed +
'px'
;
}
break
;
default
:
if
(Math.
abs
(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}
else
{
this.elemBox.style.top = this.elemBox.offsetTop + speed +
'px'
;
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}