/*
- 가로100px, 세로100px 상자가 1초마다 10px 오른쪽으로 이동하도록 작성하세요.
단, 이동할 때 상자의 움직임은 부드러워야 한다.
- 이동시간이 간격보다 긴 경우, 움직임이 꼬일 수 있음(animation시간이 < setInterval간격)
*/
<title>rolling예제1</title>
<script src="../JS/jquery.min.js"></script>
<script>
var ml=10;
$(function(){
setInterval(function(){
$('.box').animate({'margin-left':ml+'px'},800)
ml = ml+10;
},1000)
})
</script>
</head>
<body>
<div class="box" style="height: 100px; width: 100px; background:thistle;" ></div>
</body>
시간이 지남에 따라, 네이버 뉴스나 주식 업데이트 구간처럼 내용이 바뀌는 기능을 구현해보기
(앞의 내용을 떼서 뒤로보내는 게 아니라, 쭉 지나쳐가는 걸 조건으로 함)
<title>Rolling기능(네이버에서 시간의 지남에 따라 변하는 구간)</title>
<script src="../JS/jquery.min.js"></script>
<script>
var top=-50;
$(function(){
setInterval(function(){
$('.container').animate({top:top+'px'},800)
top = top-50;
top = top==-500? 0:top;
},1000)
})
</script>
<style>
.window{
width: 200px; height: 50px; border: 1px solid red; overflow: hidden;}
.container{
width: 200px; height: 500px; background: silver; position: relative;}
.box{
height: 50px; text-align: center; line-height: 50px;}
</style>
</head>
<body>
<div class="window">
<div class="container">
<div class="box">가</div>
<div class="box">나</div>
<div class="box">다</div>
<div class="box">라</div>
<div class="box">마</div>
<div class="box">바</div>
<div class="box">사</div>
<div class="box">아</div>
<div class="box">자</div>
<div class="box">차</div>
</div>
</div>
</body>더보기
<script src="../JS/jquery.min.js"></script>
<script>
var mt=-50;
$(function(){
setInterval(function(){
$('.box:first-child').animate({'margin-top':mt+'px'},1200) //-가 있으면 ''로 묶어서 인식할수있게해줌
mt = mt-50;
mt = mt==-250? 0:mt;
},2000)
})
</script>
<style>
.view{
height: 50px; border:2px solid black; overflow: hidden;}
.box{
height: 50px; text-align: center; line-height: 50px; background: blueviolet;
font-size: 30px;}
.box:nth-child(2n){background: cornflowerblue;}
</style>
</head>
<body>
<div class="view">
<!-- view밑에 container로 box를 일부러 감싸지 않았음=> 나중에 rolling 위에서 떼서 아래로 보내는
기능을 추가하게 될 때를 생각해서라고 함-->>
<div class="box">가</div>
<div class="box">나</div>
<div class="box">다</div>
<div class="box">라</div>
<div class="box">마</div>
</div>
</body>
- 롤링 방향이 오른쪽에서 왼쪽으로 이동하도록 작성해보세요.
<title>롤링 예제3</title>
<script src="../JS/jquery.min.js"></script>
<script>
var left=-100;
$(function(){
setInterval(function(){
$('.container').animate({left:left+'px'},800)
left = left-100;
left = left==-1000? 0:left;
},1000)
})
</script>
<style>
.window{
width: 100px; height: 50px; border: 1px solid red; overflow: hidden;}
.container{
width: 1000px; height: 50px; background: silver; position: relative;}
.box{
width:100px; height: 50px; text-align: center; font-size:20px; line-height: 50px; float: left;}
.box:nth-child(2n){background: lightblue;}
</style>
</head>
<body>
<div class="window">
<div class="container">
<div class="box">가</div>
<div class="box">나</div>
<div class="box">다</div>
<div class="box">라</div>
<div class="box">마</div>
<div class="box">바</div>
<div class="box">사</div>
<div class="box">아</div>
<div class="box">자</div>
<div class="box">차</div>
</div>
</div>
</body>더보기
<script src="../JS/jquery.min.js"></script>
<script>
/*
- 롤링 방향이 오른쪽에서 왼쪽으로 이동하도록 작성해보세요.
*/
var ml=-400;
$(function(){
setInterval(function(){
$('.container').animate({'margin-left':ml+'px'},1200)
ml = ml-400;
ml = ml==-1600? 0:ml;
},1500)
})
</script>
<style>
.window{
width: 400px; height: 50px; border: 2px solid red;
overflow: hidden;}
.container{
width: 1600px; height: 50px;}
.box{
width:400px; height: 50px; text-align: center; font-size:30px; line-height: 50px; float: left;
background: pink; float: left;}
/*float하고 ::after쓰는거 지금상태에서는 부모에 가로세로를 정확하게줘서 안써도 괜찮음*/
.box:nth-child(2n){background: lightblue;}
</style>
</head>
<body>
<div class="window">
<div class="container">
<div class="box">가</div>
<div class="box">나</div>
<div class="box">다</div>
<div class="box">라</div>
</div>
</div>
</body>*position을 이용해서 left를 설정하는 것 이외에도 margin-top을 이용 가능
'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_chaining(체이닝기법) (0) | 2021.06.22 |
|---|---|
| JQ_더보기기능 (0) | 2021.06.22 |
| JQ_animate(애니메이션 효과) (0) | 2021.06.22 |
| JQ_fade(fadeIn, fadeOut, fadeToggle, fadeTo) (0) | 2021.06.22 |
| JQ_효과(hide, show, toggle) (1) | 2021.06.22 |