turn.js:メージめくりを導入できるJs
- 2019.05.20
- JavaScript jQuery
- turn.js, ページめくり

メージめくりを導入できるJsです。
1.ヘッダーの記述例
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="turn.min.js"></script>
2.CSSの記述例
以下は任意です。
<style type="text/css"> body{ background:#ccc; } #book{ width:800px; height:500px; } #book .turn-page{ background-color:white; } #book .cover{ background:#333; } #book .cover h1{ color:white; text-align:center; font-size:14px; line-height:500px; margin:0px; } #book .loader{ background-image:url(loader.gif); width:24px; height:24px; display:block; position:absolute; top:238px; left:188px; } #book .data{ text-align:center; font-size:40px; color:#999; line-height:500px; } #controls{ width:800px; text-align:center; margin:20px 0px; font:30px arial; } #controls input, #controls label{ font:30px arial; } #book .odd{ background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%); background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%); background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%); background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%); } #book .even{ background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%); background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%); background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%); background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%); } </style>
3.HTMLとJavaScriptの記述例
<div id="book"> <div class="cover"> <h1>左右のページめくりとページ数が以下に表示されます。</h1> </div> </div> <div id="controls"> <input type="text" size="3" id="page-number">/<span id="number-pages"></span> </div> <script type="text/javascript"> // Sample using dynamic pages with turn.js var numberOfPages = 1000; // Adds the pages that the book will need function addPage(page, book) { // First check if the page is already in the book if (!book.turn('hasPage', page)) { // Create an element for this page var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>'); // If not then add the page book.turn('addPage', element, page); // Let's assum that the data is comming from the server and the request takes 1s. setTimeout(function(){ element.html('<div class="data">'+page+' ページ</div>'); }, 1000); } } $(window).ready(function(){ $('#book').turn({acceleration: true, pages: numberOfPages, elevation: 50, gradients: !$.isTouch, when: { turning: function(e, page, view) { // Gets the range of pages that the book needs right now var range = $(this).turn('range', page); // Check if each page is within the book for (page = range[0]; page<=range[1]; page++) addPage(page, $(this)); }, turned: function(e, page) { $('#page-number').val(page); } } }); $('#number-pages').html(numberOfPages); $('#page-number').keydown(function(e){ if (e.keyCode==13) $('#book').turn('page', $('#page-number').val()); }); }); $(window).bind('keydown', function(e){ if (e.target && e.target.tagName.toLowerCase()!='input') if (e.keyCode==37) $('#book').turn('previous'); else if (e.keyCode==39) $('#book').turn('next'); }); </script>
ソース元:Turn.js: The page flip effect in HTML
Safari 5、Chrome 16、Firefox 10、IE 8~10は対応している様です。
-
前の記事
sagscroller:文字や画像を自動で縦スクロールするJs 2019.05.19
-
次の記事
jquery.page-scroller:ページ内アンカーをスムーズにスクロールするjs(導入が簡単) 2019.05.21