|
| Дата: Четверг, 31.10.2013, 10:32 | Сообщение # 1 |
|
Группа: Администраторы
Сообщений: 1530
| 
Листинг кода на отображающей скрипт странице
<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
|
| |
| |
|
|
Играйте бесплатно в 
