Turn.js 实现翻书效果
以下是一个使用Turn.js实现翻书效果的简单示例代码：
首先，确保在您的HTML文件中包含了Turn.js库：
<!DOCTYPE html>
<html>
<head>
<title>Flip Book Example</title>
<link rel="stylesheet" type="text/css" href="path/to/turn.css" />
<script type="text/javascript" src="path/to/modernizr.js"></script>
<script type="text/javascript" src="path/to/turn.js"></script>
<style>
#flipbook {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="flipbook">
<div class="turn-page">
<img src="page1.jpg" width="400" height="300" />
</div>
<div class="turn-page">
<img src="page2.jpg" width="400" height="300" />
</div>
<!-- Add more pages if needed -->
</div>
<script>
var flipbook = $('#flipbook').turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
</body>
</html>确保替换path/to/turn.css, path/to/modernizr.js, 和 path/to/turn.js为正确的文件路径，并将page1.jpg和page2.jpg替换为您自己的图片文件。
这个简单的示例展示了如何创建一个基本的翻书效果。Turn.js支持更多高级功能，如翻页动画、多页书本等。您可以访问Turn.js的官方文档来了解更多详细信息和高级用法。
评论已关闭