Листинг кода js-скрипта листающейся книги Листинг кода js-скрипта листающейся книги - Архив
Листинг кода js-скрипта листающейся книги
DownLoad_Free

Листинг кода js-скрипта листающейся книги - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » Листинг кода js-скрипта листающейся книги
Листинг кода js-скрипта листающейся книги
Дата: Четверг, 31.10.2013, 10:32 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524


Листинг кода на отображающей скрипт странице

<div align="center">

<style type="text/css">

#book{
width:800px;
height:500px;
}

#book .turn-page{
background-color:white;
}

#book .obl{
background:#191615;
}

#book .cover h1{
color:white;
text-align:center;
font-size:50px;
line-height:500px;
margin:0px;
}

#book .loader{
background-image:url(http://kachay.ucoz.org/img12_2/orange-round-load.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:12px arial;
}

#controls input, #controls label{
font:12px 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%);
}

h1{color:#fff;margin-bottom:20px;font-size:24px;}
</style>

<script type="text/javascript" src="http://s21.ucoz.net/src/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://kachay.ucoz.org/js/turn_is/turn_demo.js"></script>

<div id="book">

<div align="center" class="obl"><h1>Каталог Антиквариата</h1>
<img style='width:80%;margin:10px auto' onclick="$('#book').turn('page', 1);" src="/js/turn_is/pages/1.jpg" />
</div>
</div>

<div id="controls">
<span style="cursor:pointer" onclick="$('#book').turn('previous');"><</span> <label for="page-number">Page:</label>
<input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
<span style="cursor:pointer" onclick="$('#book').turn('next');">></span>
</div>

<script type="text/javascript">

// Sample using dynamic pages with turn.js

var numberOfPages = 5;

// 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">Data for page '+page+'</div>');
element.html('<div class="data"><img style="margin-top:30px;width:85%;" src="/js/turn_is/pages/'+page+'.jpg" /></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>
<script type="text/javascript">
function list(x){
$('#book').turn('page',x)
}
var nav="<div style='margin-top:10px;' align='center'>";
for(var i=1;i<6;i++) {
nav+="<img style='width:100px;margin-left:3px;' onclick='list("+i+");' src='/js/turn_is/pages/"+i+".jpg' />";
}
nav+="</div>"
//document.write(nav);
$("#controls").append(nav);
</script>

</div>

------------------------------------------------------
Рабочий пример просмотра картинок и другого html контента в виде листающейся книги
http://kachay.ucoz.org/load/listing_book_script/27-1-0-370
 
Дата: Четверг, 31.10.2013, 10:35 | Сообщение # 2
Группа: Администраторы
Сообщений: 1524
Листинг turn_demo.js

http://kachay.ucoz.org/js/turn_is/turn_demo.js
 
Архив » История мировых и локальных событий » История развития сайта » Листинг кода js-скрипта листающейся книги
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!