이전
목록
다음
아

책 목록 슬라이드

아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-02-22 (수) 09:17:39 · 3665 · 2
이 글에서 문의한 내용에 맞도록 작성했습니다.

jQuery.animate에서 step을 이용하는 부분이 핵심(?)이고,

jQuery UI Effect의 Easing을 바꿔서 실험해보시면 다양한 경험이 가능합니다.



[index.html]

<!DOCTYPE html>
<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://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://cfile7.uf.tistory.com/image/1208654B4E0AB1DF1B8309" alt="Book #9" /></li>
<li><img src="http://cfile26.uf.tistory.com/image/1506AF474DF70B7E10AC86" alt="Book #12" /></li>
<li><img src="http://cfile29.uf.tistory.com/image/1506AF474DF70B7D0F3ABB" alt="Book #14" /></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-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




#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 2개

김김우너석
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-02-23 (목) 05:10:16
우어어어어어!! 멋지십니다 ㅠㅠ
프프리자인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-02-29 (수) 21:58:24
유용할것 같습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-02-26 조회 3,113
12-02-26 조회 3,424
12-02-26 조회 3,271
12-02-26 조회 3,356
12-02-26 조회 3,401
12-02-26 조회 3,243
12-02-26 조회 3,569
12-02-26 조회 3,381
12-02-26 조회 3,460
12-02-26 조회 3,932
12-02-26 조회 2,890
12-02-26 조회 5,083
12-02-25 조회 2,628
12-02-25 조회 3,102
12-02-24 조회 2,815
12-02-24 조회 3,197
12-02-24 조회 3,174
12-02-24 조회 3,484
12-02-24 조회 3,047
12-02-24 조회 3,826
12-02-24 조회 3,802
12-02-24 조회 3,393
12-02-24 조회 9,249
12-02-23 조회 2,784
12-02-23 조회 3,232
12-02-23 조회 3,030
12-02-23 조회 3,075
12-02-23 조회 3,697
12-02-23 조회 2,776
12-02-23 조회 3,267
12-02-23 조회 2,951
12-02-23 조회 2,713
12-02-22 조회 3,601
12-02-22 조회 5,372
12-02-22 조회 2,931
12-02-22 조회 4,334
12-02-22 조회 3,216
12-02-22 조회 3,044
12-02-22 조회 3,940
12-02-22 조회 3,843
12-02-22 조회 2,777
12-02-22 조회 3,809
12-02-22 조회 4,258
12-02-22 조회 3,666
12-02-22 조회 2,856
12-02-22 조회 4,487
12-02-21 조회 3,045
12-02-21 조회 2,828
12-02-21 조회 2,748
12-02-21 조회 3,650
12-02-21 조회 3,881
12-02-21 조회 3,326
12-02-21 조회 2,835
12-02-20 조회 3,072
12-02-20 조회 3,697
12-02-20 조회 3,638
12-02-20 조회 2,926
12-02-20 조회 5,729
12-02-20 조회 3,526
12-02-20 조회 6,733
12-02-20 조회 3,117
12-02-20 조회 4,080
12-02-19 조회 3,278
12-02-18 조회 3,015
12-02-18 조회 3,742
12-02-17 조회 2,890
12-02-17 조회 4,059
12-02-17 조회 2,964
12-02-17 조회 3,504
12-02-17 조회 3,289
12-02-17 조회 6,135
12-02-17 조회 4,334
12-02-17 조회 2,953
12-02-17 조회 2,992
12-02-17 조회 3,367
12-02-16 조회 3,191
12-02-16 조회 3,243
12-02-16 조회 4,589
12-02-16 조회 2,832
12-02-16 조회 5,210
12-02-16 조회 4,972
12-02-15 조회 3,522
12-02-15 조회 3,135
12-02-15 조회 4,671
12-02-15 조회 3,186
12-02-15 조회 3,578
12-02-15 조회 2,675
12-02-15 조회 3,944
12-02-14 조회 3,444
12-02-14 조회 3,556
12-02-14 조회 3,964
12-02-14 조회 2,995
12-02-14 조회 6,057
12-02-14 조회 3,005
12-02-14 조회 4,048
12-02-13 조회 3,323
12-02-13 조회 2,954
12-02-13 조회 7,089
12-02-12 조회 2,778
12-02-12 조회 5,149
글쓰기