问题描述
我正在尝试使用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> ```
解决方法
阅读代码注释
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,#C4C4C4 100%);
background-image:-ms-linear-gradient(right,#C4C4C4 100%);
background-image:-o-linear-gradient(right,#C4C4C4 100%);
background-image:linear-gradient(right,#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,#fff),#dadada));
background-image:-webkit-linear-gradient(left,#fff 95%,#dadada 100%);
background-image:-moz-linear-gradient(left,#dadada 100%);
background-image:-ms-linear-gradient(left,#dadada 100%);
background-image:-o-linear-gradient(left,#dadada 100%);
background-image:linear-gradient(left,#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>