반응형
오늘도 초간단 애니메이션 입니다.페이지를 새로고침하면 실행됩니다.
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>
<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>
반응형
