KCP API결제 버전 배포 - exec() 불가 환경 대응KCP exec() 불가 대응 버전 배포
이전
목록
다음
아

책 목록 슬라이드

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-02-22 (수) 09:17:39 · 3702 · 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-04-26 조회 3,824
12-04-24 조회 3,221
12-04-23 조회 4,552
12-04-22 조회 3,245
12-04-19 조회 3,326
12-04-18 조회 4,383
12-04-18 조회 3,095
12-04-17 조회 3,366
12-04-17 조회 5,124
12-04-16 조회 3,538
12-04-13 조회 3,085
12-04-09 조회 3,155
12-04-04 조회 3,923
12-04-01 조회 3,206
12-03-31 조회 3,595
12-03-30 조회 3,200
12-03-30 조회 3,867
12-03-26 조회 3,476
12-03-26 조회 3,050
12-03-22 조회 3,210
12-03-21 조회 3,064
12-03-19 조회 3,472
12-03-17 조회 3,500
12-03-14 조회 3,233
12-03-10 조회 3,913
12-03-09 조회 3,493
12-03-09 조회 3,321
12-03-08 조회 3,791
12-03-08 조회 3,966
12-03-08 조회 4,057
12-03-03 조회 3,299
12-03-02 조회 4,633
12-02-28 조회 3,168
12-02-27 조회 2,977
12-02-25 조회 3,128
12-02-24 조회 3,836
12-02-23 조회 3,100
12-02-22 조회 3,620
12-02-22 조회 5,394
12-02-22 조회 3,967
12-02-22 조회 4,284
12-02-18 조회 3,773
12-02-17 조회 2,996
12-02-17 조회 3,406
12-02-14 조회 3,476
12-02-13 조회 3,361
12-02-10 조회 1만
12-02-08 조회 3,021
12-02-07 조회 3,359
12-02-06 조회 3,085
12-02-05 조회 3,548
12-01-31 조회 3,473
12-01-30 조회 9,655
12-01-29 조회 3,814
12-01-26 조회 3,416
12-01-25 조회 4,027
12-01-24 조회 3,421
12-01-10 조회 3,733
12-01-10 조회 4,485
12-01-09 조회 3,268
12-01-08 조회 7,129
12-01-08 조회 3,653
12-01-07 조회 5,178
12-01-04 조회 3,887
12-01-02 조회 3,110
12-01-02 조회 3,163
12-01-02 조회 3,468
12-01-01 조회 3,104
11-12-31 조회 3,411
11-12-31 조회 3,086
11-12-30 조회 3,253
11-12-30 조회 3,404
11-12-29 조회 3,617
11-12-28 조회 3,713
11-12-26 조회 3,276
11-12-23 조회 3,501
11-12-22 조회 3,046
11-12-15 조회 4,135
11-12-08 조회 3,953
11-12-05 조회 3,290
11-12-04 조회 5,708
11-12-03 조회 3,569
11-12-02 조회 3,350
11-12-01 조회 5,425
11-11-30 조회 2,913
11-11-30 조회 2,806
11-11-28 조회 3,154
11-11-26 조회 3,333
11-11-25 조회 3,352
11-11-24 조회 2,949
11-11-22 조회 3,038
11-11-22 조회 2,883
11-11-17 조회 2,818
11-11-11 조회 2,817
11-11-09 조회 2,873
11-11-08 조회 3,248
11-11-08 조회 2,543
11-11-04 조회 3,625
11-11-01 조회 2,930
11-10-26 조회 2,518
글쓰기