jQuery+turn.js翻书、文档和杂志3种特效演示

很好用的一款插件jQuery+turn.js翻书、文档和杂志3种特效演示

jQuery+turn.js翻书、文档和杂志3种特效演示-LMLPHP
在线预览

实例代码

<!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>