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

2016-11-21 11:49:01来源:cnblogs.com作者:285267128人点击

很好用的一款插件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>

  

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台