Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Буклет - имитация книги с перелистыванием страниц.


Буклет - имитация книги с перелистыванием страниц.

Сообщений 1 страница 10 из 10

1

Источник: 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://fordis.rolka.su/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>

0

2

о боже, какая шикарная вещь!
я бы очень хотела себе такое, но мне не подходит по стилю, разве что мааленький буклетик, но такое, я думаю, будет очень сложно настроить.
я уже полчаса копаюсь-копаюсь, да так и не могу понять что к чему)

0

3

suicidal imbecile

<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://fordis.rolka.su/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>

Красным выделена картинка-фон левой страницы.
Синим выделен фон правой.
Розовым выделена картинка самого буклета.
Желтым - кнопочки для перелистывания.
Зелёным - картинка загрузки.
Всеми остальными цветами выделены сами цвета. То есть, какой цвет прописан (например, #FF0000), таким цветом в коде я и выделила (#FF0000).

+1

4

Классная штука!
Только возникла одна проблема - когда начинаю заполнять страницы, все изображения почему-то сильно растягиваются, а в заголовках стоит картинка из категории форума, а сам шрифт огромный %) Вот ссылка. Не подскажете, как это можно исправить?

0

5

подскажите, как заполнить страницы?

0

6

loool

faiko написал(а):

Размещение страниц:

<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>

+1

7

разобралась

faiko
что-то у меня не получается вставить на страничку в книге юрл-картинку или вообще хоть какое-то юрл хд  т.е. чтоб надпись/картинка была кликабельна.

Отредактировано loool (2012-11-02 14:12:23)

0

8

и да, я почему-то не могу на одну страницу вставить две и более маленьких(50х50) кликабельных картинок, т.е. вставляется только одна, которую растягивает на всю страницу хдд

0

9

А можно делать этот буклет в постах?

0

10

Kirasin написал(а):

А можно делать этот буклет в постах?

Теоретически это возможно при помощи скрипта HTML в постах.
Попробуйте.
http://forumdts.org/viewtopic.php?id=2431

0


Вы здесь » Кот » Фишки и примочки » Буклет - имитация книги с перелистыванием страниц.


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC