0527 duration
jQuery 2014. 5. 27. 21:16<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
.lodding{width:65px; height:71px; border:1px #F00 solid; margin:150px auto;}
</style>
<script type="text/javascript">
jQuery(function(){
setInterval(playload,100);
var heightMove = 0;
var swe = true;
function playload(){
heightMove -= 71;
heightMove;
if(heightMove<-5112){
//consloe.log('실행');
heightMove = 0;
}else{
$('.lodding').css('background','url(http://dept.galleria.co.kr/web/img/motionicon/scroll.png) no-repeat 0 '+heightMove+'px');
}
}
$('.lodding').css('position','absolute').animate({
left:'400px'
},{
duration:4000,
step:function(){
if($('.lodding').position().left>399 && swe){
swe = false;
$('.lodding').stop().animate({
marginTop : '0px'
});
}
} // 4초동안 위의 동작을 하는 동안 값 추출 (위의 동작으로는 좌표값을 알 수 있음)
});
});
</script>
</head>
<body style="background:#000">
<div class="lodding">
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| jquery 플러그인 (0) | 2015.07.14 |
|---|---|
| 배너2 (0) | 2014.05.15 |
| 이미지 배너 (0) | 2014.05.13 |
| div 안에 있는 엘리먼트 합 구하기 (0) | 2013.02.03 |
| 신현석님 Jquery AIP 정리 (1) | 2012.08.29 |