使用 javascript 库“turn.js”和 html 创建翻书
[英]Creating a flipbook using javascript library 'turn.js' and html
问题描述
我正在尝试使用 turn.js 库创建翻书。 下面是我正在使用的代码，但它似乎不起作用。 它目前在 jsfiddle 上正常运行，如下所示 [text] http://jsfiddle.net/xd7sh59p/
我哪里错了？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
</body>
</html> ```
1 个解决方案
解决方案1
0 2020-11-12 13:44:30
阅读代码注释
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 5px #666; font-weight:bold; } #flipbook .odd{ background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA)); background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%); -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 5px #666; } #flipbook .even{ background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada)); background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%); background-image:linear-gradient(left, #fff 95%, #dadada 100%); -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 5px #666; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div class="hard"></div> <div class="hard"></div> </div> <!-- Turn.js depends on jQuery library, so load it first --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Then load Turn.js library from CDN [it will not work if you load library directly from turn.js website] --> <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script> <!-- Finally initiate Turn.js --> <script type="text/javascript"> $("#flipbook").turn({ width: 400, height: 300, autoCenter: true }); </script> </body> </html>
turn.js翻书的页面透明度不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.