book.js

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

샘플영상

다운로드

book.js V1.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>

 

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. 필요한 옵션을 적용 합니다.

 

 

 

 

* 플러그인 설치는 지원하지는 않습니다.
위로

잠시만 기다려주세요.