[英]How can i change the height of turnjs page
here i am using turn js flip library and i want to change the height of turnjs page. 在这里我使用转js翻转库,我想改变turnjs页面的高度。 here it is calculating the height of page by using the client height. 这里是使用客户端高度计算页面高度。 now i need to change the height of the page to lets say 700px. 现在我需要改变页面的高度让我们说700px。 how can i do this? 我怎样才能做到这一点?
<script type='text/javascript'>
(function () {
'use strict';
var module = {
ratio: 1.38,
init: function (id) {
var me = this;
if (document.addEventListener) {
this.el = document.getElementById(id);
this.resize();
this.plugins();
window.addEventListener('resize', function (e) {
var size = me.resize();
$(me.el).turn('size', size.width, size.height);
});
}
},
resize: function () {
this.el.style.width = '';
this.el.style.height = '';
var width = this.el.clientWidth,
height = Math.round(width / this.ratio),
padded = Math.round(document.body.clientHeight * 0.9);
if (height > padded) {
height = padded;
width = Math.round(height * this.ratio);
}
this.el.style.width = width + 'px';
this.el.style.height = height + 'px';
return {
width: width,
height: height
};
},
plugins: function () {
$(this.el).turn({
gradients: true,
acceleration: true
});
document.body.className = 'hide-overflow';
}
};
module.init('book');
}());
</script>
html: HTML:
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div class="page page1">
<img src="image600x650.png">
</div>
</div>
</div>
</div>
Below is the code for magazine height 500px and width 992px function loadApp() { 下面是杂志高度500px和宽度992px函数loadApp(){
flipbook.turn({
// Magazine width
width: 922,
// Magazine height
// Modify below height as you need
height: 500,
}
});
And Modify magazine.css / add style like below set height as you need 并修改magazine.css /添加样式,如下所示设置高度
.magazine-viewport .container{
width:922px;
height:500px;
}
.magazine-viewport .magazine{
width:922px;
height:500px;
}
.magazine-viewport .page{
width:922px;
height:500px;
}
.magazine-viewport .next-button,
.magazine-viewport .previous-button{
width:22px;
height:500px;
}
In main.js 在main.js中
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp, 10);
return;
}
// Create the flipbook
flipbook.turn({
// Magazine width
// width: 922,
width: 1245,
// Magazine height
// height: 600,
height: 810,
// Duration in millisecond
duration: 1000,
// Hardware acceleration
acceleration: !isChrome(),
// Enables gradients
gradients: true,
// Auto center this flipbook
autoCenter: true,
// Elevation from the edge of the flipbook when turning a page
elevation: 50,
// The number of pages
pages: 12,
// Events
when: {
turning: function(event, page, view) {
var book = $(this),
currentPage = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
$('.thumbnails .page-'+currentPage).
parent().
removeClass('current');
$('.thumbnails .page-'+page).
parent().
addClass('current');
},
turned: function(event, page, view) {
disableControls(page);
$(this).turn('center');
if (page==1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
is most simple, just change 'ratio'... 1 is equal width X height, 2 is double height, 1.5 is proportion to height. 最简单,只需改变'比例'... 1等宽X高,2是双高,1.5是高度比例。 600x650 is 1.083 ratio. 600x650的比率为1.083。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.