0

我正在尝试为 ipad 在 js/jquery 上构建一本翻书。我遇到了一个奇怪的问题...顶部的目录图标指向我的目录页面，您可以在其中单击选择并翻转到相应的页面。直到第 4 页一切正常，但之后每当我被重定向到 TOC 页面时，该页面上的链接就会停​​止工作......

有任何想法吗？

这里是使用的代码的摘录：

<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,user-scalable=yes,maximum-scale=3,width=device-width">
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<style type="text/css">
body{
    background:#ccc;
}
#magazine{
    width:768px;
    height:1024px;
}
#magazine .turn-page{
    background-color:#f7931a;
    background-size:100% 100%;
}
#toc {
    background-color: rgba(254,139,2,0.9);
    position: absolute;
    width: 240px;
    height: 523px;
    z-index: 1;
    left: 505px;
    top: 17px;
    color: #FFF;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: bolder;
    text-align: center;
}
#video {
    position: absolute;
    width: 720px;
    height: 671px;
    z-index: 2;
    left: 22px;
    top: 270px;
}
#tocicon {
    position: absolute;
    width: 43px;
    height: 43px;
    z-index: 3;
    left: 363px;
    top: 0px;
}
#rightarrow {
    position: absolute;
    width: 39px;
    height: 55px;
    z-index: 4;
    left: 412px;
    top: 2px;
}
#leftarrow {
    position: absolute;
    width: 34px;
    height: 48px;
    z-index: 4;
    left: 319px;
    top: 2px;
}
</style>
<script type="text/javascript">

    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'single',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    /*console.log('Current view: ', $(this).turn('view'));*/
                                }
                            }
                        });
    });


    $(window).bind('keydown', function(e){

        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');

    });
</script>
</head>

<body>

<div id="magazine">
  <div style="background-image:url(1.jpg);"></div>
  <div style="background-image:url(2.jpg);">
        <!-- TOC -->
    <div id="toc">
      <script>
            $("page1").click(function(){
                $("#magazine").turn("page", 1);
            });
            $("page3").click(function(){
                $("#magazine").turn("page", 3);
            });
            $("page6").click(function(){
                $("#magazine").turn("page", 6);
            });
            </script>
            <p><page1>αρχή</page1></p>
            <p><page3>απεριόριστες δυνατότητες</page3></p>
            <p><page6>Selection 3</page6></p>
    </div>
            <!-- /TOC -->
    </div>
  <div style="background-image:url(3.jpg);">
        <!-- Toc icon-->
        <div id="tocicon">
            <script>
                $("totoc").click(function(){
                $("#magazine").turn("page", 2);
                });
            </script>
            <totoc><img src="toc.png" width="40" height="40"></totoc>
         </div><!-- /Toc icon -->
            <div id="video"> 
              <embed src="merten-video.mp4" width="720" height="740"></embed>
            </div>
    </div>
  <div style="background-image:url(7.jpg);">
        <div id="tocicon">
        <script>
                $("totoc").click(function(){
                $("#magazine").turn("page", 2);
                });
        </script>
                <totoc><img src="toc.png" width="40" height="40"></totoc>
        </div>
  </div>
  <div style="background-image:url(8.jpg);">
    <div id="tocicon">
            <script>
                $("totoc").click(function(){
                $("#magazine").turn("page", 2);
                });
            </script>
                <totoc><img src="toc.png" width="40" height="40"></totoc>
    </div>
  </div>
    <div style="background-image:url(10.jpg);"><!-- Toc icon -->
        <!-- Toc icon -->
        <div id="tocicon">
          <script>
                $("totoc").click(function(){
                $("#magazine").turn("page", 2);
                });
            </script>
      <totoc><img src="toc.png" width="40" height="40"></totoc>
      </div>
    <!-- /Toc icon -->
  </div>
    <div style="background-image:url(11.jpg);"><!-- Toc icon -->
        <!-- Toc icon -->
        <div id="tocicon">
          <script>
                $("totoc").click(function(){
                $("#magazine").turn("page", 2);
                });
            </script>
      <totoc><img src="toc.png" width="40" height="40"></totoc>
      </div>
    <!-- /Toc icon -->
  </div>
4

0 回答 0