46820


いつも大変お世話になっております。

HTML、css、jQueryの初心者です。  
会社からの指示でホームページを作成することになりました。  
作成時間は業務時間外で休日を使うしかない状況です。  
デザインはできたのですが、プログラムで大変苦戦しています。  
どうぞ宜しくお願いいたします。

やりたい処理の流れです。

* * *

（１）最初の画面をクリックすると次の画面が表示される  
（２）表示された画面の中央にはjQueryのOneBook3dでページがめくれる機能をのせたonebook3dSampleが表示されている

* * *

上記の流れで（２）ができません。

また、（１）の最初の画面は、上1行ぶんあいて表示されるので、背景のdesktop.jpgが見えてしまいます。

JSフォルダ内のファイルです。  
jquery.mousewheel.min.js  
jquery.onebook3d-2.33.js  
jquery-1.11.0.min.js  
jquery-3.3.1.min.js  
OneBook3d_sample.js  
three.min.js

プログラムです。

[code]

    ■css
    html,body{width:100%;margin:0px;padding:0px;background:#e0604a url('desktop.jpg');color:#ffffff;min-width:800px;}
    body * { -webkit-tap-highlight-color: rgba(0,0,0,0);}
    .links a:link,.links a:visited{color:black;text-decoration:none;font:15px sans-serif;}
    .links a:hover{color:black;text-decoration:underline;}
    .headtitle p{text-align:center;margin:0px;padding:20px;font:16px; sans-serif;line-height:140%;}
    .headtitle2 p{text-align:center;margin:0px;padding:20px;font:16px; sans-serif;line-height:140%;}
    /address{margin:0px auto 50px auto;padding:0px;width:800px;text-align:center;}
    /address, .address a{font:13px arial, sans-serif;color:black;}
    
    
    ■HTML
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8" />
            <meta name="description" content="">
            <title></title>
            <link rel="stylesheet" type="text/css" href="./css/jquery-OneBook3d.css"/>
            <script type="text/javascript" charset="utf-8" src="./js/jquery-1.11.0.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="./js/jquery.mousewheel.min.js"></script>
            <script type="text/javascript" src="./js/three.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d-2.33.js"></script>
    
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/turn.js/3/turn.min.js"></script>
    
      </head>
    
      <body>
    
    <!--ボタンの画像表示-->
    <p class="button">
      <img style="width: 100%;" src="./img/1.jpg" alt="ボタン"  >
    </p>
    
    <!--ノートの画像表示-->
    <p class="note">
    
    </p>
    
    <script>
        $(function(){
        // 画面初回表示時
        $('p.note').hide();
    
        // image/1.jpgをクリック時の処理
        $('p.button').click(function(){
            // 'p.note'を表示
            $('p.note').show();
            // 'p.button'を非表示
            $(this).hide();
        });
    
        // turn.js 3rd
        $('#flipbook').turn({
            width:1000,
            height:600,
        });
        });
    </script>
    
    <!--ノートをめくる-->
    <div id="onebook3dSample"></div>      
    
    <script>
         $(function () {
           var imgArray = [
             ['./img/img_001.jpg', 'title1'],
             ['./img/img_002.jpg', 'title2'],
             ['./img/img_003.jpg', 'title3'],
             ['./img/img_004.jpg', 'title4'],
             ['./img/img_005.jpg', 'title5'],
             ['./img/img_006.jpg', 'title6'],
             ['./img/img_007.jpg', 'title7'],
             ['./img/img_008.jpg', 'title8'],
             ['./img/img_009.jpg', 'title9'],
             ['./img/img_010.jpg', 'title10'],
             ['./img/img_011.jpg', 'title11']
           ];
    
           $('#onebook3dSample').onebook(imgArray, {
             startPage: 1,
             flip: 'soft',
             skin: 'dark',
             bgDark: '#222222 url(./img/desktop.jpg)',
             pageColor: '#FFFFFF',
             slope: 0,
             border: 0,
             language: 'en',
             cesh: true
           });
         });
    </script>
    
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-07-22T01:40:34.333
46818
2018-07-22T02:20:11.620
29323
question
html jquery css
画面が切り替わるプログラムとページがめくれるプログラムをひとつのプログラムにまとめたいです


> （２）表示された画面の中央にはjQueryのOneBook3dでページがめくれる機能をのせたonebook3dSampleが表示されている

ボタンクリック時に、`onebook3`を表示すれば良いと思います。ただし、`onebook3`が表示されるまでに少し時間がかかります。

> また、（１）の最初の画面は、上1行ぶんあいて表示されるので、背景のdesktop.jpgが見えてしまいます。

`<p class="button" />`にデフォルトでマージンが設定されていることが原因だと思います。  
そのため、以下のようなスタイル定義を追加すれば良いかと思います。

[code]

     p.button {
       margin: 0;
     }
    
[/code]

* * *

修正例は以下になります。

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="description" content="">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./css/jquery-OneBook3d.css"/>
        <script type="text/javascript" charset="utf-8" src="./js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="./js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="./js/three.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d-2.33.js"></script>
        <style>
         p.button {
           margin: 0;
         }
        </style>
      </head>
    
      <body>
        <!--ボタンの画像表示-->
        <p class="button">
          <img style="width: 100%;" src="./img/1.jpg" alt="ボタン"  >
        </p>
    
        <!--ノートの画像表示-->
        <p class="note">
        </p>
    
        <div id="onebook3dSample"></div>
    
        <script>
         $(function(){
           // 画面初回表示時
           $('p.note').hide();
    
           var imgArray = [
             ['./img/img_001.jpg', 'title1'],
             ['./img/img_002.jpg', 'title2'],
             ['./img/img_003.jpg', 'title3'],
             ['./img/img_004.jpg', 'title4'],
             ['./img/img_005.jpg', 'title5'],
             ['./img/img_006.jpg', 'title6'],
             ['./img/img_007.jpg', 'title7'],
             ['./img/img_008.jpg', 'title8'],
             ['./img/img_009.jpg', 'title9'],
             ['./img/img_010.jpg', 'title10'],
             ['./img/img_011.jpg', 'title11']
           ];
    
           // image/1.jpgをクリック時の処理
           $('p.button').click(function(){
             // 'p.note'を表示
             $('p.note').show();
    
             // onebook3dを表示
             $('#onebook3dSample').onebook(imgArray, {
               startPage: 1,
               flip: 'soft',
               skin: 'dark',
               bgDark: '#222222 url(../img/desktop.jpg)',
               pageColor: '#FFFFFF',
               slope: 0,
               border: 0,
               language: 'en',
               cesh: true
             });
    
             // 'p.button'を非表示
             $(this).hide();
           });
         });
        </script>
      </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-07-22T02:20:11.620
46820
2018-07-22T02:20:11.620
46818
answer