很好用的一款插件jQuery+turn.js翻書、文檔和雜誌3種特效演示 線上預覽 下載地址 實例代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh ...
很好用的一款插件jQuery+turn.js翻書、文檔和雜誌3種特效演示
實例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示：jQuery+turn.js翻書、文檔和雜誌</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style type="text/css">
h3 a{font-size: 14px;margin-right: 10px;cursor: pointer;}
</style>
</head>
<body>
<h3 style="width:500px;margin:50px auto 0" id="menus">
<a class="cur" onclick="jumpto('samples/basic/index.html')">演示1：預設翻書效果</a>
<a onclick="jumpto('samples/docs/index.html')">演示2：翻文檔</a>
<a onclick="jumpto('samples/magazine/index.html')">演示3：翻雜誌</a>
<a onclick="jumpto('samples/steve-jobs/index.html')">演示4：翻steve書</a>
</h3>
<iframe id="iframe" src="samples/basic/index.html" width="100%" height="800px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</body>
<script type="text/javascript" src="/static/js/home.js"></script>
</html>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#menus").children("a").click(function(){
$(this).addClass("cur").siblings("a").removeClass("cur");
})
function jumpto(inputurl) {
document.getElementById("iframe").src = inputurl
}
</script>
