그냥 개발자 블로그

book.js 플러그인 - 책 넘기는 효과 본문

소식/플러그인소식

book.js 플러그인 - 책 넘기는 효과

마음이파파 2016. 8. 3. 00:09





제이쿼리를 이용한 책장 넘기는 효과를 구현한 플러그인

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/book.js"></script>

<style>
      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}
    #book .page{text-align:center;}
</style>


<script>
    $(function(){
        $('#book').book({
            speed:15,
            bookgb: '#666' 
        });
    });
</script>


<body>
    <div id="book">
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
    </div>
</body>

 

1. 제이쿼리를 설치해 줍니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/book.js"></script>

<style>
      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}
    #book .page{text-align:center;}
</style>


<script>
    $(function(){
        $('#book').book({
            speed:15,
            bookgb: '#666' 
        });
    });
</script>


<body>
    <div id="book">
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
    </div>
</body>

 

2. 다운로드 받은 플러그인을 설치해 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/book.js"></script>

<style>
      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}
    #book .page{text-align:center;}
</style>


<script>
    $(function(){
        $('#book').book({
            speed:15,
            bookgb: '#666' 
        });
    });
</script>


<body>
    <div id="book">
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
    </div>
</body>

 

3. 위와 같이 책의 내용을 한장씩 이미지로 추가합니다. 

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/book.js"></script>

<style>
      #book{width:800px; height:540px; border:1px solid #eee; margin:50px;}
    #book .page{text-align:center;}
</style>


<script>
    $(function(){
        $('#book').book({
            speed:15,
            bookgb: '#666' 
        });
    });
</script>


<body>
    <div id="book">
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
        <div class='page'><img src=""></div>
    </div>
</body>

 

4. 페이지가 실해될때 자바스크립도 동시에 실행되는 위치에 함수를 작성합니다.

 

 

 

 

$('#book').book({
      speed:15, //페이지 넘기는 속도를 조절합니다. (추천 값 = 15)
      bookgb: '#666'  // 페이지의 맨 앞장과 맨 뒷장의 배경을 지정 합니다.
});

 

5. 필요한 옵션을 적용 합니다.

 



6. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.





[문의하기]


copyright ⓒ 2017. 워크식스

저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

tabMaker.js 플러그인 - 탭 메뉴를 쉽게 만들어 주는 플러그인  (0) 2016.08.09
swipemenu.js 플러그인 - 모바일웹 좌우 슬라이드 메뉴 효과  (0) 2016.08.03
pgpopup.js - 잠깐 나타났다 사라지는 팝업 플러그인  (0) 2016.08.02
dropdownbanner.js - 쇼핑몰 상단배너 플러그인  (2) 2016.08.02
slidebanner.js 플러그인 - 슬라이드 배너 플러그인  (3) 2016.08.02
'소식/플러그인소식' Related Articles more