我可以运行 demo official documentation 提供的 fiddle 脚本.
但是当我下载脚本并打开演示时，它在我的浏览器上不起作用。我的控制台上没有错误。
我尝试在浏览器中的 fiddle 上运行相同的脚本，但这次我确实遇到了错误。 “未捕获的类型错误:无法读取 null turn.js:184 的属性‘style’”
我不太明白。这是我正在使用的代码。
<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 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;
}
</style>
</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>
</body>
</html>
最佳答案
因为您在元素出现在页面上之前正在阅读该元素。
要么将脚本移动到正文的底部，使其位于您引用的元素之后，要么使用文档就绪
$(function(){ //document ready
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
});
关于javascript - 为什么 turn.js 演示不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22837350/