본문 바로가기

자바스크립트/기타등등

이미지 애니메이션 Javascript 코드

반응형
오늘도 초간단 애니메이션 입니다.
페이지를 새로고침하면 실행됩니다.
F22가 허접하게 날라가는 모양 ㅋㅋㅋ


code
<head>
<style>
 .exam {
background-image:url('f22.png');
width:217px;
height:105px;
position: absolute;
left:0;
top:200px;
}

</style>
</head>
<body> 
<img src="sky.png">
<div id="mmkk"></div>

<script>
var currentPos=0;
var intervalHandles;

function beginAnimate(){
     document.getElementById("mmkk").className="exam"; //style 적용
     intervalHandles=setInterval(animateBox,30); //비행기가 한곳에 머무는 시간
}

function animateBox(){
     currentPos+=5;
     document.getElementById("mmkk").style.left=currentPos+"px";
     if(currentPos>540){
      clearInterval(intervalHandles);
      document.getElementById("mmkk").className="" //style 초기화
     }
}

window.onload=function(){
setTimeout(beginAnimate,1000); //페이지 열리고 1초뒤에 실행
}
</script>
</body>
</html>






반응형