자바스크립트 상하 롤링 질문입니다.
본문
function rolling(options) {
var self = this;
this.object = document.getElementById(options.rollId);
this.object.onmouseover = function() { self.stop(); };
this.object.onmouseout = function() { self.play(); };
this.delay = options.delay || 1000;
this.speed = options.speed || 50;
this.step = options.step || 1;
this.mover = options.mover || false;
this.elChildHeight = options.childHeight;
this.elHeight = this.object.offsetHeight;
this.elPosition = 0;
this.object.appendChild(this.object.cloneNode(true));
this.control = setTimeout(function() {self.play()}, this.delay);
}
rolling.prototype = {
play:function() {
var self = this, time;
this.elPosition = this.elPosition>(this.mover?this.elHeight:0) ? this.elPosition-this.elHeight : this.elPosition+1;
this.object.style.top = (this.mover ? -this.elPosition : this.elPosition) + "px";
this.control = setTimeout(function() {self.play()}, this.elPosition%(this.elChildHeight*this.step)==0?this.delay:this.speed);
},
stop:function() {
clearTimeout(this.control);
}
}
var roll1 = null, roll2 = null;
window.onload = function() {
roll1 = new rolling({rollId: "rollText1", delay: 1000, speed: 10, step: 5, mover: true, childHeight: 18});
roll2 = new rolling({rollId: "rollText2", delay: 1000, speed: 10, step: 5, mover: true, childHeight: 18});
}
자바스크립트 상하 롤링에 저 코드를 사용하고 있는데 pc에서는 잘 구동되는데 모바일에서 볼 때 상하롤링이 진행되는 곳에 터치를 하게 되면 멈춰서 움직이지 않습니다.(반응형홈페이지입니다.) onmouseover가 모바일에서 먹히지 않는다고 하는데 onmouseover부분이 문제인가요..?
어떻게 변경하는게 좋은가요? 부탁드려요 ㅠㅠ
답변 1
모바일에선 오버나 아웃리브의 개념이 없습니다 오버의 경우 터치로 인식하더라도
소스상 this.object.onmouseout = function() { self.play(); }; 마우스가 아웃되었을때
플레이 되게 되어있으니 다시 안돌아 가는게 맞는것 같습니다.
모바일은 따로 터치(클릭)개념으로 한번 터치시 멈추고 재클릭시 돌고 하는 방법으로 하시면 어떨까요..
답변을 작성하시기 전에 로그인 해주세요.
