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
: