이 글에서 문의한 내용에 맞도록 작성했습니다.
jQuery.animate에서 step을 이용하는 부분이 핵심(?)이고,
jQuery UI Effect의 Easing을 바꿔서 실험해보시면 다양한 경험이 가능합니다.
[index.html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Book Scroller</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.less" media="screen" rel="stylesheet" type="text/less" />
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.effects.core.js" type="text/javascript"></script>
<script src="http://lesscss.org/js/less.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="application.coffee" type="text/coffeescript"></script>
</head>
<body>
<section id="content">
<div id="books">
<ul>
<li><img src="http://image.yes24.com/momo/TopCate160/MidCate06/15959941.jpg" alt="Book #1" /></li>
<li><img src="http://image.yes24.com/momo/TopCate160/MidCate02/15917878.jpg" alt="Book #2" /></li>
<li><img src="http://image.yes24.com/momo/TopCate152/MidCate08/15174800.jpg" alt="Book #3" /></li>
<li><img src="http://insightbook.springnote.com/pages/8500578/attachments/5594964" alt="Book #4" /></li>
<li><img src="http://insightbook.springnote.com/pages/7906642/attachments/5411872" alt="Book #5" /></li>
<li><img src="http://cfile3.uf.tistory.com/image/197A43364E6022C04F44D9" alt="Book #6" /></li>
<li><img src="http://cfile4.uf.tistory.com/image/14272C394E6022E1247E60" alt="Book #7" /></li>
<li><img src="http://cfile25.uf.tistory.com/image/16693A4D4E363453276921" alt="Book #8" /></li>
<li><img src="http://cfile7.uf.tistory.com/image/1208654B4E0AB1DF1B8309" alt="Book #9" /></li>
<li><img src="http://insightbook.springnote.com/pages/7751314/attachments/5160842" alt="Book #10" /></li>
<li><img src="http://insightbook.springnote.com/pages/7591481/attachments/5007932" alt="Book #11" /></li>
<li><img src="http://cfile26.uf.tistory.com/image/1506AF474DF70B7E10AC86" alt="Book #12" /></li>
<li><img src="http://insightbook.springnote.com/pages/7353367/attachments/4864463" alt="Book #13" /></li>
<li><img src="http://cfile29.uf.tistory.com/image/1506AF474DF70B7D0F3ABB" alt="Book #14" /></li>
<li><img src="http://insightbook.springnote.com/pages/6844495/attachments/4514309" alt="Book #15" /></li>
<li><img src="http://insightbook.springnote.com/pages/6635359/attachments/4364331" alt="Book #16" /></li>
</ul>
</div>
</section>
</body>
</html>
[stylesheet.less]
@itemWidth: 80px;
@itemHeight: 120px;
@linkWidth: 25px;
@linkHeight: 50px;
body {
font-size: 12px;
background: #EEE;
color: #333;
margin: 0;
}
#content {
margin: 10px auto;
padding: 20px;
width: 600px;
background: #FFF;
}
#books {
position: relative;
border: 2px solid #CCC;
ul {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
li {
float: left;
margin: 5px;
width: @itemWidth;
height: @itemHeight;
border: 1px solid #EEE;
img {
width: @itemWidth;
height: @itemHeight;
}
}
a.previous,
a.next {
position: absolute;
top: (@itemHeight - @linkHeight) / 2;
display: block;
width: @linkWidth;
height: @linkHeight;
background-image: url(http://bookdaum.com/slide/images/arrow.gif);
background-repeat: no-repeat;
overflow: hidden;
text-indent: -10000.0em;
}
a.previous {
left: 0;
background-position: 0 0;
&:hover {
background-position: 0 -@linkHeight;
}
}
a.next {
right: 0;
background-position: -@linkWidth 0;
&:hover {
background-position: -@linkWidth -@linkHeight;
}
}
}
[application.coffee]
jQuery.fn.bookScroller = (options) ->
showCount = options.showCount
scrollCount = options.scrollCount
duration = options.duration
container = $(this)
list = container.find('ul')
items = list.find('li')
firstItem = list.find('li:first')
itemWidth = firstItem.outerWidth(true)
itemHeight = firstItem.outerHeight(true)
step = (now, fx) ->
item = $(fx.elem)
if now <= -itemWidth
fx.now += items.length * itemWidth
if now >= (items.length - 1) * itemWidth
fx.now -= items.length * itemWidth
prevLink = $('<a></a>').attr(href: '#').text('Previous').addClass('previous')
.click ->
list.find('li').animate
left: "+=#{itemWidth * scrollCount}px"
,
duration: duration
easing: 'easeOutBounce'
step: step
false
nextLink = $('<a></a>').attr(href: '#').text('Next').addClass('next')
.click ->
list.find('li').animate
left: "-=#{itemWidth * scrollCount}px"
,
duration: duration
easing: 'easeOutBounce'
step: step
false
container
.append(prevLink)
.append(nextLink)
.css
overflow: 'hidden'
width: showCount * itemWidth
height: itemHeight
paddingLeft: prevLink.outerWidth()
paddingRight: nextLink.outerWidth()
list.css
position: 'relative'
overflow: 'hidden'
width: showCount * itemWidth
height: itemHeight
items.each (i, item) ->
$(item).css
position: 'absolute'
top: 0
left: i * itemWidth
$ ->
$('#books').bookScroller
showCount: 5
scrollCount: 5
duration: 800
댓글 2개
13년 전
우어어어어어!! 멋지십니다 ㅠㅠ
13년 전
유용할것 같습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4730 |
제너레이션
|
13년 전 | 1003 | |
| 4729 | 13년 전 | 948 | ||
| 4728 | 13년 전 | 701 | ||
| 4727 | 13년 전 | 1246 | ||
| 4726 | 13년 전 | 854 | ||
| 4725 | 13년 전 | 1682 | ||
| 4724 | 13년 전 | 1021 | ||
| 4723 | 13년 전 | 2689 | ||
| 4722 | 13년 전 | 563 | ||
| 4721 |
ECEditor
|
13년 전 | 2233 | |
| 4720 | 13년 전 | 2617 | ||
| 4719 | 13년 전 | 4389 | ||
| 4718 | 13년 전 | 962 | ||
| 4717 | 13년 전 | 1175 | ||
| 4716 | 13년 전 | 1353 | ||
| 4715 |
한번잘해보자
|
13년 전 | 1169 | |
| 4714 | 13년 전 | 1177 | ||
| 4713 | 13년 전 | 2827 | ||
| 4712 | 13년 전 | 1250 | ||
| 4711 |
김준수사랑
|
13년 전 | 1014 | |
| 4710 |
한번잘해보자
|
13년 전 | 1147 | |
| 4709 | 13년 전 | 1143 | ||
| 4708 | 13년 전 | 823 | ||
| 4707 | 13년 전 | 1703 | ||
| 4706 |
프로프리랜서
|
13년 전 | 2091 | |
| 4705 |
프로프리랜서
|
13년 전 | 1380 | |
| 4704 | 13년 전 | 969 | ||
| 4703 |
프로프리랜서
|
13년 전 | 936 | |
| 4702 | 13년 전 | 836 | ||
| 4701 | 13년 전 | 1571 | ||
| 4700 | 13년 전 | 2600 | ||
| 4699 | 13년 전 | 1313 | ||
| 4698 |
 소울페이지 |
13년 전 | 1601 | |
| 4697 |
소울페이지 |
13년 전 | 1118 | |
| 4696 |
소울페이지 |
13년 전 | 1138 | |
| 4695 |
소울페이지 |
13년 전 | 1347 | |
| 4694 |
소울페이지 |
13년 전 | 864 | |
| 4693 |
소울페이지 |
13년 전 | 855 | |
| 4692 |
소울페이지 |
13년 전 | 858 | |
| 4691 |
소울페이지 |
13년 전 | 1186 | |
| 4690 |
소울페이지 |
13년 전 | 1271 | |
| 4689 |
소울페이지 |
13년 전 | 1020 | |
| 4688 |
소울페이지 |
13년 전 | 780 | |
| 4687 |
소울페이지 |
13년 전 | 1055 | |
| 4686 |
소울페이지 |
13년 전 | 1009 | |
| 4685 |
소울페이지 |
13년 전 | 940 | |
| 4684 |
소울페이지 |
13년 전 | 1042 | |
| 4683 |
소울페이지 |
13년 전 | 933 | |
| 4682 |
소울페이지 |
13년 전 | 1243 | |
| 4681 |
소울페이지 |
13년 전 | 1020 | |
| 4680 |
소울페이지 |
13년 전 | 1144 | |
| 4679 |
소울페이지 |
13년 전 | 1654 | |
| 4678 |
 가나다라마바사아자차카타파하 |
13년 전 | 581 | |
| 4677 | 13년 전 | 2913 | ||
| 4676 |
복이219
|
13년 전 | 622 | |
| 4675 | 13년 전 | 816 | ||
| 4674 | 13년 전 | 614 | ||
| 4673 | 13년 전 | 992 | ||
| 4672 | 13년 전 | 934 | ||
| 4671 | 13년 전 | 1200 | ||
| 4670 | 13년 전 | 718 | ||
| 4669 | 13년 전 | 1778 | ||
| 4668 | 13년 전 | 1420 | ||
| 4667 |
너는나의봄이다
|
13년 전 | 1022 | |
| 4666 | 13년 전 | 6696 | ||
| 4665 | 13년 전 | 628 | ||
| 4664 | 13년 전 | 1003 | ||
| 4663 | 13년 전 | 843 | ||
| 4662 | 13년 전 | 976 | ||
| 4661 | 13년 전 | 1244 | ||
| 4660 | 13년 전 | 845 | ||
| 4659 | 13년 전 | 1105 | ||
| 4658 |
소나무닷컴
|
13년 전 | 690 | |
| 4657 | 13년 전 | 709 | ||
| 4656 |
 늘푸른등불 |
13년 전 | 1243 | |
| 4655 | 13년 전 | 3101 | ||
| 4654 | 13년 전 | 677 | ||
| 4653 | 13년 전 | 2101 | ||
| 4652 | 13년 전 | 874 | ||
| 4651 | 13년 전 | 777 | ||
| 4650 | 13년 전 | 1669 | ||
| 4649 | 13년 전 | 1600 | ||
| 4648 | 13년 전 | 614 | ||
| 4647 | 13년 전 | 1510 | ||
| 4646 | 13년 전 | 1937 | ||
| 4645 | 13년 전 | 1337 | ||
| 4644 | 13년 전 | 610 | ||
| 4643 | 13년 전 | 2027 | ||
| 4642 | 13년 전 | 821 | ||
| 4641 |
가나다라마바사아자차카타파하 |
13년 전 | 607 | |
| 4640 | 13년 전 | 567 | ||
| 4639 |
소울페이지 |
13년 전 | 1295 | |
| 4638 |
소울페이지 |
13년 전 | 1666 | |
| 4637 |
 스터디24 |
13년 전 | 1137 | |
| 4636 | 13년 전 | 633 | ||
| 4635 | 13년 전 | 763 | ||
| 4634 | 13년 전 | 1266 | ||
| 4633 | 13년 전 | 1245 | ||
| 4632 |
가나다라마바사아자차카타파하 |
13년 전 | 543 | |
| 4631 | 13년 전 | 3342 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기