标签: turnjs
在TurnJs Flipbook上动态放置大型HTML内容
我不确定这是否已经讨论过,我试着搜索问题列表但找不到与之相关的任何内容.
我有一个大的HTML内容,我需要使用turn.js绑定.我的问题是,使用转js,我将不得不将HTML拆分为单独的div标签作为页面.是否有一种方法在turn.js中绑定div上的内容,它会根据被绑定的内容自动包装到不同的页面？
或者有没有办法知道需要将多少数据绑定到每个页面才能使此方案正常工作.
推荐指数
解决办法
查看次数
如何在turn.js中禁用剥离(悬停效果)？
我不想在turn.js中使用悬停动画.试过这个:
$('#flipbook').turn({
width: 400,
height: 300,
});
$('#flipbook').turn('peel', false);?
任何形式的帮助将不胜感激.
推荐指数
解决办法
查看次数
如何使用turn.js进行缩放
我试图让使用turn.js具有相同的功能在网站上的例子翻书http://www.turnjs.com/samples/magazine/
在查看如何实现这一目标时,我遇到了这些页面
http://www.turnjs.com/docs/Method:_zoom
http://turnjs.com/docs/How_to_add_zoom_to_turn.js
但是在页面上按照这些说明后,我的翻书工作就像样本一样.
我尝试使用提供的示例并将其分解为部分以使我的工作正常但我还没有更接近解决此问题,并且示例包含一堆其他脚本,我不确定它们是否需要进行缩放或是用于其他事情.
不确定我是否遗漏了一些非常简单的东西,或者我的代码是否真的关闭但我的html看起来像这样.
现在我点击缩放按钮时得到的是这本书可以扩展150%
想知道是否有人可以告诉我我缺少什么来缩放？
<div class="row">
<div id="zoom-viewport">
<div id="flipbook">
// wordpress loop
<div class="page">
// page contents
</div>
// end loop
</div>
</div>
</div>
和jQuery
//----------------------------
// Initialize
var _width = $('#flipbook-wrap').width(),
_height = Math.round(70.909090909/100*_width),
_winWidth = $window.width(),
_winHeight = $window.height();
$("#flipbook").turn({
width: _width,
height: _height,
autoCenter: true
});
//----------------------------
// Zoom in button
$('.fullscreen').click(function(e){
e.preventDefault();
$("#flipbook").turn("zoom", 1.5);
});
推荐指数
解决办法
查看次数
如何使用Turn.js将filp效果添加到epub页面？
我有一个.epub文件，当用户在页面之间切换时，该文件没有任何效果或动画
我使用Turn.js库，因为它无法正常工作。我无法使用eBook阅读器软件打开它。
这是我的Epub文件夹目录
在添加Turn.js库之前
后加Turn.js库
这是我的chap_0001.xhtml HTML代码
<head>
<title>How to Win Every Argument</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
</head>
<body dir="auto">
<h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
<div class="offset">
<div class="flipbook-viewport"><!-- Added-->
<div class="container"><!-- Added-->
<div class="flipbook"><!-- Added-->
<div style="width: 100.0%;">
<img src="images/img_0001.png" alt="Picture #1"/>
</div>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/> …推荐指数
解决办法
查看次数
turn.js在翻页时添加声音
我想使用turn.js jquery插件在页面翻转时添加声音效果.因此,第一步是根据在线文档测试执行该功能的功能.所以代码应该是这样的:
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
width:1000,
height:680,
elevation: 50,
gradients: true,
autoCenter: false,
});
$("#flipbook").bind("turned", function(event, page, view) {
alert("Page: "+page);
});
}
yepnope({
test : Modernizr.csstransforms,
yep: ['../res_cod/js/turn.js'],
nope: ['../res_cod/js/turn.html4.min.js'],
both: ['../res_cod/css/basic.css'],
complete: loadApp
});
</script>
但事情在开发者控制台中没有任何反应.没有警报,没有任何消息.
推荐指数
解决办法
查看次数
使用turn.js进行垂直翻转
我在我的应用程序中使用turn.js,并希望实现类似于http://pageflip-books.com/documentation-configuration.php的垂直翻转 - VerticalMode
任何人都可以让我知道,我怎样才能实现垂直翻转轮流？js？
推荐指数
解决办法
查看次数
Ionic 2 Flipbook就像Turn Js
我正在构建一个用于查看Ionic 2交易的应用程序.我想开发一个必须将图像显示为翻页的应用程序,如下面的链接
我尝试在Ionic 2应用程序中实现此插件但未成功.我的问题如下
- 有插件吗？
- 如何将js插件集成到我的Ionic2应用程序？(任何指导)
提前致谢.
推荐指数
解决办法
查看次数
纯Javascript中的页面翻转效果
对于一个电子书阅读器webapp,我试图为电子书制作一个类似于书的浏览器,如iBooks for iPad和iPhone.
我发现了优秀的jQuery插件,这正是我试图达到的.唯一的问题是,它是一个jQuery插件,所以我不能使用它.怎么可能在纯Javascript中完成？
链接到jQuery页面翻转插件:转JS jQuery插件
推荐指数
解决办法
查看次数
鼠标单击并鼠标悬停在turn.js无效的效果上
推荐指数
解决办法
查看次数
为什么不转.js演示工作？
但是当我下载脚本并打开演示时,它在我的浏览器上不起作用.我的控制台上没有错误.
我尝试在浏览器中运行相同的脚本,这次我收到错误."未捕获的TypeError:无法读取null turn.js的属性'style':184"
我不太清楚.这是我正在使用的代码.
<html>
<head>
<script type="text/javascript" src="includes/jquery-1.11.0.js"></script>
<script type="text/javascript" src="includes/turn.js"></script>
<script>
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
<style>
body{
overflow:hidden;
}
#flipbook{
width:400px;
height:300px;
}
#flipbook .page{
width:400px;
height:300px;
background-color:white;
line-height:300px;
font-size:20px;
text-align:center;
}
#flipbook .page-wrapper{
-webkit-perspective:2000px;
-moz-perspective:2000px;
-ms-perspective:2000px;
-o-perspective:2000px;
perspective:2000px;
}
#flipbook .hard{
background:#ccc !important;
color:#333;
-webkit-box-shadow:inset 0 0 5px #666;
-moz-box-shadow:inset 0 0 5px #666;
-o-box-shadow:inset 0 0 5px #666;
-ms-box-shadow:inset 0 0 5px #666;
box-shadow:inset 0 0 …推荐指数
解决办法
查看次数