gpt4 book ai didi

javascript - 像示例一样制作 Turn.js 书?

转载 作者:行者123 更新时间:2023-11-28 09:25:07 26 4
gpt4 key购买 nike

我目前正在使用 Jquery 使用 turn.js 制作一本书,进展顺利,但我需要一点帮助。你看,我正在尝试制作一本精装期刊类型的书,就像此处显示的示例一样 http://www.turnjs.com/#samples/html5/1 .我的问题是,我怎样才能让书的页数小于封面和封底?另外,我怎样才能得到它,以便当我继续翻页时,页面的数量明显地增加到另一边,就像示例中那样?

有人可以帮我编辑下面主页的代码,这样我就可以得到我想要的效果吗?

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:1002px;
height:773px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="magazine">
<div class="hard">A Book</div>
<div class="hard"></div>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
<div>Page 6</div>
<div>Page 7</div>
<div>Page 8</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
</body>
</html>

最佳答案

您可以通过使用 own-size 作为 CSS 类并为页面定义自定义大小来更改页面的大小。 See this page .

关于javascript - 像示例一样制作 Turn.js 书?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25913634/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com