Источник: forumd.ru
Долгие поиски закончились. Вниманию всех-всех и еще раз всех. Скрипт, позволяющий воссоздать книгу с эффектом перелистывания страниц. Молескин. Буклет. Книгу таинств, не знаю, что еще. Я сразу скажу, он сложно настраиваемый, но ради такого я готов помогать с настройкой внешнего вида каждому. Потому что это безумно красиво. Итак.
Подключаемые скрипты и стили (html верх или низ, если скрипт размещен на странице, то в контейнер страницы)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script> <script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script> <link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
Стиль. С ним – отдельные сложности, рассказать их все сразу невозможно, поэтому по мере возникновения вопросов я буду на них отвечать. Сразу скажу: чтобы организовать такой красивый скрипт, используется картинка-подложка, имитирующая книгу. Перелистывание как таковое можно размещать и без нее.
<style> .booklet{ -moz-box-shadow:0px 0px 1px #fff; -webkit-box-shadow:0px 0px 1px #fff; box-shadow:0px 0px 1px #fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .booklet .b-wrap-left { background:#fff url(http://ruseller.com/lessons/les809/demo/images/left_bg.jpg) no-repeat top left; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .booklet .b-wrap-right { background:#efefef url(http://ruseller.com/lessons/les809/demo/images/right_bg.jpg) no-repeat top left; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .booklet .b-counter { bottom:10px; position:absolute; display:block; width:80%; height:20px; border-top:1px solid #ddd; color:#222; text-align:center; font-size:12px; padding:5px 0 0; background:transparent; -moz-box-shadow:0px -1px 1px #fff; -webkit-box-shadow:0px -1px 1px #fff; box-shadow:0px -1px 1px #fff; opacity:0.8; } .book_wrapper{ margin:0 auto; padding-top:50px; width:860px; height:540px; position:relative; background:transparent url(http://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px; } .book_wrapper h1{ color:#13386a; margin:5px 5px 5px 15px; font-size:26px; background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left; padding-bottom:7px; } .book_wrapper p{ font-size:14px; margin:5px 5px 5px 15px; } .book_wrapper img{ margin:10px 0px 5px 35px; width:300px; padding:4px; border:1px solid #ddd; -moz-box-shadow:1px 1px 1px #fff; -webkit-box-shadow:1px 1px 1px #fff; box-shadow:1px 1px 1px #fff; } .booklet .b-wrap-right img{ border:1px solid #E6E3C2; } a#next_page_button, a#prev_page_button{ display:none; position:absolute; width:36px; height:40px; cursor:pointer; margin-top:-20px; top:50%; background:transparent url(http://ruseller.com/lessons/les809/demo/images/buttons.png) no-repeat 0px -40px; } a#prev_page_button{ left:-8px; } a#next_page_button{ right:-6px; background-position:-41px -40px; } a#next_page_button:hover{ background-position:-41px 0px; } a#prev_page_button:hover{ background-position:0px 0px; } .loading{ width:160px; height:56px; position: absolute; top:50%; margin-top:-28px; right:135px; line-height:56px; color:#fff; padding-left:60px; font-size:12px; background: #000 url(http://ruseller.com/lessons/les809/demo/images/ajax-loader.gif) no-repeat 10px 50%; opacity: 0.7; z-index:9999; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } </style>
Размещение страниц:
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Загружаем страницы...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div><img src="ссылка_на_картинку" alt=""/>
<h1>Заголовок страницы 1</h1>
<p>Наполнение страницы 1 </p></div>
<div>
<img src=" ссылка_на_картинку " alt="" />
<h1>Заголовок страницы два</h1>
<p>Контент второй страницы </p></div> <div>
</div>
</div>
</div><div>
</div>
И на последок – сам скрипт. Настраиваемый. Все опции описаны.
<script type="text/javascript"> $(function() { var $mybook = $('#mybook'); var $bttn_next = $('#next_page_button'); var $bttn_prev = $('#prev_page_button'); var $loading = $('#loading'); var $mybook_images = $mybook.find('img'); var cnt_images = $mybook_images.length; var loaded = 0; //Предварительно загружаем все страницы в книжке, //а затем вызываем плагин Booklet $mybook_images.each(function(){ var $img = $(this); var source = $img.attr('src'); $('<img/>').load(function(){ ++loaded; if(loaded == cnt_images){ $loading.hide(); $bttn_next.show(); $bttn_prev.show(); $mybook.show().booklet({ name: null, // Имя буклета, которое выводится в заголовке документа width: 725, // Ширина контейнера height: 450, // Высота контейнера speed: 600, // Скорость перехода между страницами direction: 'LTR', // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL (справа налево) startingPage: 0, // Индекс страницы, которая будет выводиться первой easing: 'easeInOutQuad', // Метод сглаживания для завершения трансформации easeIn: 'easeInQuad', // Метод сглаживания для первой половины трансформации easeOut: 'easeOutQuad', // Метод сглаживания для второй половины трансформации closed: true, // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец closedFrontTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы closedFrontChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы closedBackTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы closedBackChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы covers: false, // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно) pagePadding: 10, // Отступ для обертки каждой страницы pageNumbers: true, // Выводит номер на каждой странице hovers: false, // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы overlays: false, // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши tabs: false, // Добавляет закладки вдоль верха страницы tabWidth: 60, // Определяем ширину закладок tabHeight: 20, // Определяем высоту закладок arrows: false, // Добавляем стрелки поверх кромок книжки cursor: 'pointer', // Установка css для курсора для боковой области книжки hash: false, // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash' keyboard: true, // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая) next: $bttn_next, // Селектор для элемента, который используется как выключатель перехода к следующей странице prev: $bttn_prev, // Селектор для элемента, который используется как выключатель перехода к предыдущей странице menu: null, // Селектор элемента, который используется как область меню, требуется для 'pageSelector' pageSelector: false, // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu' chapterSelector: false, // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu' shadows: true, // Выводить тени при анимации страниц shadowTopFwdWidth: 166, // Ширина тени для верха анимации вперед shadowTopBackWidth: 166, // Ширина тени для верха анимации назад shadowBtmWidth: 50, // Ширина тени для низа анимации }); } }).attr('src',source); }); }); </script>