괴발개발/Javascript+JQuery

JQ_롤링기능(rolling_가로,세로,역방향)

moonday 2021. 6. 24. 22:41

rolling.js => 롤링기능 모아놓은 파일

function rollingTop(list, listItem, marginTop, animateTime, intervalTime){
  var id = setInterval(function(){
    if(!$(list + ' ' + listItem).first().is(':animated')){ //가아니면
      $(list + ' ' + listItem).first()
       .animate({'margin-top':marginTop+'px'},animateTime,function(){
       $(this).detach().appendTo(list).removeAttr('style');
      })
    }
  },intervalTime)
  return id;
}

function rollingLeft(list, listItem, animateTime, intervalTime){
  var id = setInterval(function(){
    if(!$(list+ ' '+ listItem).first().is(':animated')){
      var width = $(list+' '+listItem).first().innerWidth();
      $(list+' '+listItem).first()
        .animate({'margin-left':'-'+width}, animateTime, function(){
        $(this).detach().appendTo(list).removeAttr('style');
      })
   }
  },intervalTime);
  return id;
}

    
function rollingRight(list, listItem, animateTime, intervalTime){
  var id = setInterval(function(){
  if(!$(list+ ' '+ listItem).first().is(':animated')){
      var width = $(list+' '+listItem).last().innerWidth();
      $(list+' '+listItem).last().detach().prependTo(list)
      .css({'margin-left':-width+'px'}).animate({'margin-left':'0px'},animateTime);
    } 
  },intervalTime);
  return id;
}

function rolling(deirection, list, listItem, margin, animateTime,intervalTime){
  if(deirection.toLowerCase() == 'left'){
    return rollingLeft(list, listItem, animateTime, intervalTime);
  }
  else if(deirection.toLowerCase()=='right'){
    return rollingRight(list, listItem, animateTime, intervalTime);
  }else{
    return rollingTop(list, listItem, margin, animateTime, intervalTime);
  }
}

function reorganizing_rollingToRight(list, listItem, animateTime, intervalTime){
  var id=
  setInterval(function(){
    if(!$(list+ ' '+ listItem).first().is(':animated')){
      var width= $(list+ ' '+ listItem).first().width();
      $(list+ ' '+ listItem).first().detach().appendTo(list);
      $(list).css('margin-left',-width+'px').animate({'margin-left':'0px'},animateTime)
    }
  },intervalTime);
  return id;
}

1. 세로방향에서 아래에서 위로 올라가는 기능 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링 예제(두개)</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="../JS/rolling.js"></script>
  <script>
    var id1, id2;
    $(function(){
     id1 = rollingTop('.first','li',-50,800,1000);
     id2 = rollingTop('.second','li',-50,1000,1500);

      $('.first').hover(function(){
        clearInterval(id1);
        },function(){
        id1= rollingTop('.first','li',-50,800,1000);
      })

      $('.second').hover(function(){
        clearInterval(id2);
        },function(){
        id2= rollingTop('.second','li',-50,1000,1500);
      })
      
    })
</script>
   <style>
    ul{
      list-style: none; padding: 0; margin: 0; height: 50px; overflow: hidden;
      text-align: center; background: goldenrod; margin-bottom: 10px;
    }
    li{
      height: 50px; line-height: 50px;
    }    
   </style>
</head>
<body>
  <div class="box">
    <ul class="first">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ul class="second">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</body>
</html>
더보기

쌤코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링 예제(세로이동)</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="../JS/rolling.js"></script>
  <script>
    var id1, id2, id3;
    $(function(){
      id1 = rollingTop('.box1','li',-50,800,1000);
      id2 = rollingTop('.box2','li',-50,1000,1500);
      id3 = rollingTop('.box3','li',-50,1500,2000);
      $('.box1').hover(function(){ 
        clearInterval(id1);
        },function(){
        id1 = rollingTop('.box1','li',-50,800,1000);
      })
      $('.box2').hover(function(){
        clearInterval(id2);
        },function(){
        id2 = rollingTop('.box2','li',-50,1000,1500);
      })
      $('.box3').hover(function(){
        clearInterval(id3);
        },function(){
        id3 = rollingTop('.box3','li',-50,1500,2000);
      })
    })
</script>
   <style>
    ul{
      list-style: none; height: 50px; overflow: hidden;
      background: yellowgreen;
    }
    li{
      text-align: center; line-height: 50px; height: 50px;
    }    
   </style>
</head>
<body>
    <ul class="box1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul class="box2">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
    <ul class="box3">
      <li>ㄱ</li>
      <li>ㄴ</li>
      <li>ㄷ</li>
      <li>ㄹ</li>
    </ul>
  </div>
</body>
</html>

 

2. 가로방향에서 왼쪽에서오른쪽(기본)방향으로 이동하는 롤링

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링예제(가로_왼쪽에서오른쪽)</title>
  <script src="../JS/jquery.min.js"></script>
  <script>
    var id1
    $(function(){
      id1 = rollingLeft('.container','li',-200,800,1000);
      
      $('.container').hover(function(){
        clearInterval(id1);
      },function(){
        id1 = rollingLeft('.container','li',-200,800,1000);
      })
    })
    function rollingLeft(list, listItem, marginLeft, animateTime, intervalTime){
      var id = setInterval(function(){
        if(!$(list + ' ' + listItem).first().is(':animated')){ 
          $(list + ' ' + listItem).first()
           .animate({'margin-left':marginLeft+'px'},animateTime,function(){
           $(this).detach().appendTo(list).removeAttr('style');
          })
        }
      },intervalTime)
      return id;
    }  
  </script>
  <style>
    *{margin: 0; padding: 0; text-decoration: none; color: black; list-style: none;}
    .window{
      width: 200px; height: 50px; border: 1px solid red; overflow: hidden;}
    .container{
      width: 800px; height: 50px; background: silver; position: relative;}
    .container li{
      width:200px; height: 50px; text-align: center; font-size:20px; line-height: 50px; float: left;}
  </style>
</head>
<body>
  <div class="window">
    <ul class="container">
      <li>가</li>
      <li>나</li>
      <li>다</li>
      <li>라</li>
    </ul>
  </div>
</body>
</html>
더보기

쌤코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링예제(가로)</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="../js/rolling.js"></script> 
  <!--순서지킬것, 편하게사용할 수 있도록 기능을 만들어 모아놓은 걸 plug-in이라고 함-->
  <script>
    $(function(){
      id=rollingLeft('.box1', 'li', '800', '1000');
      $('.box1').hover(function(){
        clearInterval(id);
      }, function(){
        id= rollingLeft('.box1', 'li', '800', '1000');
      })
    })
  </script>
  <style>
    .view-box{
      height: 50px; overflow: hidden; border: 2px solid black;
    }
    ul{
      list-style: none; padding: 0; margin: 0; width: 400%; 
    }
    li{
      width: 25%; height: 50px; line-height: 50px; text-align: center; float: left;
    }
    ul::after{
      display: block; content: ''; clear: both;
    }
  </style>
</head>
<body>
  <div class="view-box">
    <ul class="box1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>

 

3. 가로에서 방향이 왼쪽에서 오른쪽으로 이동하는 롤링

(숫자배열이 가-나-다-라 순으로 나오게하기위해서 li태그 순서 배치 후 들어간거라서 왼쪽제일첫번째가 first)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링예제(가로_오른쪽에서왼쪽으로)</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="../JS/rolling.js"></script>
  <script>
    var id;
    $(function(){
      id=reorganizing_rollingToRight('.container', 'li', 800, 1000); 

      $('.container').hover(function(){
        clearInterval(id);
      }, function(){
        id=reorganizing_rollingToRight('.container', 'li', 800, 1000); 
      })
    })
  </script>
  <style>
    *{margin: 0; padding: 0; text-decoration: none; color: black; list-style: none;}
    .window{
      width: 200px; height: 50px; border: 1px solid red; overflow: hidden;}
    .container{
      width: 800px; height: 50px; background: silver; position: relative;}
    .container li{
      width:200px; height: 50px; text-align: center; font-size:20px; line-height: 50px; 
      float: right;}

  </style>
</head>
<body>
  <div class="window">
    <ul class="container">
      <li>가</li>
      <li>나</li>
      <li>다</li>
      <li>라</li>
    </ul>
  </div>
</body>
</html>
더보기

쌤코드 (숫자배열이동없이 그대로 4-3-2-1 순서로 나옴)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>롤링예제(가로)</title>
  <script src="../JS/jquery.min.js"></script>
  <script src="../JS/rolling.js"></script>
  <script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>

  <script>
    var id;
    $(function(){
      id = rollingRight('.box1', 'li', 800, 1000);
      //id=rolling('right', '.box1', 'li', 0,800,1000);
      $('.view-box').hover(function(){
        clearInterval(id);
      },function(){
        id=rollingRight('.box1','li',800,1000);
      })
    })
  </script>
  <style>
    .view-box{
      height: 50px; overflow: hidden; border: 2px solid black;
    }
    .box1{
      list-style: none; width: 400%; padding: 0; margin: 0;
    }
    .box1 li{
      width: 25%; height: 50px; line-height: 50px; text-align: center;
      background: yellowgreen; float: left;
    }

  </style>
</head>
<body>
  <div class="view-box">
    <ul class="box1">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>
저작자표시

'괴발개발 > Javascript+JQuery' 카테고리의 다른 글

JQ_swiper 스와이퍼사용방법  (0) 2021.06.25
JQ_롤링(좌우버튼달기)  (0) 2021.06.25
JQ_스크롤( scroll(), scrollTop(),scrollLeft() )  (0) 2021.06.24
JQ_detach()  (0) 2021.06.24
JQ_질문등록창(+서브질문등록)  (1) 2021.06.24

'괴발개발/Javascript+JQuery'의 다른글

  • 현재글JQ_롤링기능(rolling_가로,세로,역방향)

관련글

댓글

티스토리툴바