scrollBy(x, y): 상대좌표이며 x,y만큼 이동해라
scrollTo(x, y): 절대좌표이며 x,y만큼 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크롤</title>
<style>
img{
width:300px;
height:300px;
}
#move{width:100px; height:100px; position: absolute; left:0px; top:200px;}
</style>
</head>
<body onload = "timer = setInterval('scrollMove()', 500); imgPosition(); setInterval('imageMove()', 500)"
onmouseover="clearInterval(timer)"
onmouseout ="timer = setInterval('scrollMove()', 500)"
>
<h1>스크롤바 자동으로 이동하기</h1>
<img src="../img/swisda.jpg" id="move" />
<div></div>
<script>
var timer;
function scrollMove(){
window.scrollBy(0, 10);
}
var img = ["jeju.png","swisda.jpg","jeju.png","swisda.jpg"];
for(var i=0; i<=img.length; i++)
{
document.write("<img src='../img/" + img[i++] + "'/> ");
}
//이미지 움직이기
function imgPosition() {
document.getElementById("move").style.left = "100px";
document.getElementById("move").style.top = "100px";
}
var imageMove = () => {
//현재의 left와 top의 값을 구하여 다시 left와 top을 설정
var imgTag = document.getElementById("move")
//imgTag.style.left = "100px";
//img tag에서 현재 lefg, top을 값을 구하기
var left = parseInt(imgTag.style.left) + 10; //100px -> 110px -> 120px
var top = parseInt(imgTag.style.top) + 10;
console.log(left + "," + top)
imgTag.style.left = left + "px";
imgTag.style.top = top + "px";
}
</script>
</body>
</html>
풀스택eDot