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
:

배너2

jQuery 2014. 5. 15. 21:49

<!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" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>study-banner1</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {list-style: none;  padding:30px; background:#FFFF00; text-align:center; height:202px;}
   ul li img {display:none; position:absolute; left:50%; top:30px; margin-left:-155px; width:309px; height:202px;}
   ul li.on img {display:block;}
   ul li { display:inline-block; padding-top:180px}
   ul li a {display:block; position:relative; z-index:1;  height:15px; width:15px; border:1px red solid; background:#fff;}   
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    var color = ["red","yellow","green"];
    //var colorNum = color.length;
    var liMenu = $("#banner>li").length;
    
    var menu = $("#banner>li").index();
    
    var timeRun = setInterval(count,2000);
    
    
    $("#banner>li").hover(function(){
     clearInterval(timeRun);
    },function(){
     timeRun = setInterval(count,2000);
     //setInterval(count,2000);
    });
    
    $("#banner>li>a").hover(function(){
     var menu = $(this).parent('li').index();
     
     
     
     /*$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);*/
     move(menu);
    });
    
    
    function move(arg){
     
     $('#banner>li:eq('+arg+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[arg]);
     
    }
    
    
    function count(){
     menu +=1;
     move();
     /*
     $('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
      opacity:1
     }).siblings('li').removeClass('on').parent('ul')
     .css('background',color[menu]);
     */
     
     if(menu == liMenu){
      menu = -1; //위에서 한번 더하기 때문에  0이 아닌 -1을 해준다
     }
    }
    
    /* 
    function test (x) {
      z = x+y;
    }
    
    alert(test (1,3));
    */
   });
  </script>
 </head>

 <body>
  <ul id="banner">
   <li class="on"><a href="#a" title="이벤트1">1</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
    
   </li>
   <li><a href="#a" title="이벤트2">2</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3">3</a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>  
  </ul>
 </body>
</html>

 

'jQuery' 카테고리의 다른 글

jquery 플러그인  (0) 2015.07.14
0527 duration  (0) 2014.05.27
이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
:

이미지 배너

jQuery 2014. 5. 13. 21:56

<!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" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>0513</title>
  <style type="text/css">
   body, ul, li {margin:0; padding:0;}
   ul {position:relative; margin:30px; list-style:none; width:309px; text-align: right;}
   ul li { display:inline-block; font-size:0; line-height:0; padding:0 2px;}
   ul li a {display:block; width:12px; height:12px; border:1px orange solid; border-radius:10px; background:yellow;}
   ul li img {display:none; position:absolute; right:0; top:22px;}
   ul li.on img {display:block; }
   ul li.on a {background:red; }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
   jQuery(function(){
    
    //return false;
     //멈춤(멈춘 후 거꾸로 진행), 진행, 반환
    
    $("#banner>li:first").addClass ('on');
    
    var chNum = 0;    
    var timerId = setInterval(count,2000);
    
      $('#banner>li').hover(function () {
        $(this).css('cursor','pointer');
        clearInterval(timerId);
      },function(){
     $(this).css('cousr','Default');
     timerId = setInterval(count,1000);
      });
     

    
            
    $("#banner>li>a").hover(function(){
     chNum = $(this).parent('li').index();
     //마우스를 올렸을때
     //console.log($(this).html());
     //console.log($(this).parent('li').index());
     //$(this).addClass('on');
     //siblings 형제노드
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     ch(chNum);
     
    },function(){
     //마우스가 나갔을때
     //$('#banner>li:eq('+chNum+')').removeClass('on');
    });
    
    
        
    function ch(arg){ //arg = chNum
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     $('#banner>li:eq('+arg+')').addClass('on').siblings('li').removeClass('on');
    }
    
    
    function count(){
    
     chNum += 1;
     ch(chNum);
     //$('#banner>li:eq('+chNum+')').addClass('on').siblings('li').removeClass('on');
     
     if(chNum == 4){
        chNum = -1; //현재 위치에서는 0 이 아닌 -1로 셋팅 --> 위에서 +1을 하고 있음
      
     }
    } 
       
   }); 
   
  </script>
 </head>
 <body>
  <ul id="banner">
   <li><a href="#a" title="이벤트1"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트2"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트3"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트4"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hsbn_140411_cam(0).jpg" alt="" />
   </li>
   <li><a href="#a" title="이벤트5"></a>
    <img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_cb_140429.jpg" alt="" />
   </li>
  </ul>
 </body>
</html>

'jQuery' 카테고리의 다른 글

0527 duration  (0) 2014.05.27
배너2  (0) 2014.05.15
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
신현석님 Jquery AIP 정리  (1) 2012.08.29
마우스오버 아웃  (0) 2012.07.10
:
◀ PREV : [1] : [2] : [3] : [4] : [5] : [6] : [7] : [8] : [···] : [51] : NEXT ▶

티스토리툴바