제목만 봐서는 어떤 내용인지 감이 안오실거라 생각합니다.
ul li 를 사용하여 화살표를 누르면 가운데에 있는 값을 변경하는것.
이라고 생각하시면 될거같네요
.
<style>
.Box{
height:40px;
font-size:30px;
overflow:hidden;
text-align:center;
width:100%;
}
.Box ul{
list-style:none;
padding:0;
margin:0;
}
.Box ul li{
margin:0;
}
#ArrowButton{
width:100%;
text-align:center;
-webkit-transition:width 1s, height 1s, background-color 1s, -webkit-transform 1s;
transition:width 1s, height 1s, background-color 1s, transform 1s;
}
#ArrowButton:hover{
cursor:pointer;
background-color:white;
color:black;
font-weight:900;
}
</style>
<div id="ArrowButton" class="btn">▲</div>
<div class="Box">
<ul>
<li>
TEST 1
</li>
<li>
TEST 2
</li>
<li>
TEST 3
</li>
<li>
TEST 4
</li>
<li>
TEST 5
</li>
</ul>
</div>
<div id="ArrowButton" class="btn">▼</div>
<script >
$('.btn').click(function () {
var idx = $(this).index() == 0 ? -40 : 40;
var div = $('.Box');
div.animate({ scrollTop: div.scrollTop() + idx }, 500);
});
</script>
아래와 같은 모양이 나올겁니다~
- TEST 1
- TEST 2
- TEST 3
- TEST 4
- TEST 5
현 페이지에서는 동작을 하지않는데 아마 스크립트 지원이 제대로 안된모양입니다.....
직접 작성을 하실때에는 include를 제대로 전부 해주신다음 작성하시면
화살표를 누를때 가운데 공간의 글자가 바뀌는것을 확인하실수 있습니다~
저는 이걸로 달력을 만들었네요..!