turn.js 怎么改變觸摸區域大小


var point = flipMethods._c.call(this, corner, data.opts.cornerSize/1);

改變 這個數字的大小會改變右下角折起的大小默認的是2 數字越大折起的角越小

          x: point.x,
          y: point.y

這兩個參數改變的是折起的角度

改變這里的 rgba( ) 顏色 會改變折角和翻頁是背面的顏色

        $("#flipbook").turn({
            display:'single',  //顯示單頁
            autoCenter: true,
            acceleration:true,
            when: {
                turned: function(event, page, view) {
                    console.log("12323")
                    $(this).turn('peel','br');  //每個可翻頁 右下角折起
                    }
                },
            page:2,//初始頁面
        });

 

  

        $("#flipbook").bind("turning", function(event, page, view) {
          if (page==1) {        //當前頁是第一頁是執行函數    
            $("#flipbook").turn("direction", "ltr");  //向右翻頁動作
            setTimeout(jump,500);  //延遲執行返回上一個頁面 可以讓用戶看到翻頁動畫
          }
        });

     function jump(){  //返回上一個頁面
            window.location.href = "javascript:history.back();"
        }

   $('.classs').click(function(){
            $("#flipbook").turn("next");   //點擊某 class 翻一頁

    $("#flipbook").turn("page",7);  //點擊 翻到對應的頁 如反倒第7頁
        });

  //   如果轉跳頁面是會閃出上一個頁面 最好先隱藏  第一頁等加載完了 再顯示  每一頁的主class設置 position: absolute;top: 0;left: 0;

        $(document).ready(function(){
            $('.index111').css('display','block');
        });

  

  turn.js 怎么改變觸摸區域大小  

  

  這個截圖是 設置每個角的活動區域的大小  就是觸摸范圍大小  我是設置了活動范圍 然后固定死右下角折起大小 就實現了想要的效果

  這個數值越大折角就會越大 我是設置了每頁自動右下角折起 所以我把折角固定死 72 ,

  

 

  

  從右往左翻   /數字越小      觸發翻頁的范圍越小    范圍是你手機的寬度 / 1(自定義數字)  比如寬度是375px  則是(0,375)

  從左往右翻  /數字越大  觸發翻頁的范圍越小    范圍是你手機的寬度 / 10(自定義數字)     比如寬度是375px  則是(0,37.5)  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM