책 넘기기 효과를 얻기 위해 JQuery의 Turn.js 라이브러리를 사용하는 방법에 대한 간략한 분석-JS 튜토리얼-php.cn

책 넘기기 효과를 얻기 위해 JQuery의 Turn.js 라이브러리를 사용하는 방법에 대한 간략한 분석

青灯夜游

풀어 주다： 2022-09-07 10:58:36

앞으로

2292명이 탐색했습니다.

이 글에서는 jQuery의 Turn.js 라이브러리를 소개하고, 책 넘기기 효과를 얻기 위해 Turn.js 라이브러리를 사용하는 방법에 대해 설명합니다. 모두에게 도움이 되기를 바랍니다.

책 넘기기 효과를 얻기 위해 JQuery의 Turn.js 라이브러리를 사용하는 방법에 대한 간략한 분석

오늘은 JQ의 Turn.js에 대해 먼저 소개해 드리겠습니다. [관련 튜토리얼 권장사항: jQuery Tutorial]

Turn.js는 HTML5의 모든 장점을 결합하고 실제 뒤집기 효과를 통해 콘텐츠를 책이나 잡지처럼 보이게 만들 수 있는 JavaScript 라이브러리입니다.

HTML5와 CSS3를 사용해 효과를 구현하기 때문에 iOS 기기(iPad, iPhone, iPod), Android 기기 등 터치 기기에서 잘 작동합니다~
Turn.js는 Flash 콘텐츠보다 실제 HTML 콘텐츠를 담는 장점을 모두 갖고 있습니다. , 네이티브 느낌(선택적 콘텐츠, 타사 컨텍스트 메뉴 없음) 외에도 광고 코드, HTML5 비디오, 툴팁, 이미지, 지도, 양식을 추가하고 각 페이지를 추적하고 수백 개와 비교할 수 있습니다. 네트워킹을 위해 정리된 깔끔한 라이브러리입니다.

***이 글의 키워드:turn.js 속성 값, 사용법, 데모 코드(글 마지막에 있는 부록 참조~~).

구현 효과는 다음과 같습니다

공식 샘플 코드:

html:

<div id = “ flipbook” >
   <div class = “ hard” > Turn.js </ div>
   <div class = “ hard” > </ div>
   <div> 第1页 </ div>
   <div> 第2页 < / div>
   <div> 第3页 </ div>
   <div> 第4页 </ div>
   <div class = “ hard” > </ div>
   <div class = “ hard” > </ div>
</ div>

로그인 후 복사

js:

1단계: JQ 소개를 기억하세요. 파일(1.3 또는 상위) 1번째 버전만 OK~~)
2단계: Turn.js 파일을 소개합니다. 공식 홈페이지(공식 주소: http://www.turnjs.com/)
에서 다운로드할 수 있습니다.
3단계: 다음 주인공인turn.js를 사용하시면 됩니다~~코드는 다음과 같습니다↓↓↓

 <script type = “ text / javascript” >
 $（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
 </ script>

로그인 후 복사

참고: hard의 클래스는 책의 (처음과 마지막) 표지로 이해될 수 있습니다

기능

✓iPad 및 iPhone에 적용됩니다.
✓ 간단하고 아름답고 강력한 API.
✓ Ajax 요청을 통해 페이지를 동적으로 로드할 수 있습니다.
✓순수한 HTML5/CSS3 콘텐츠.
✓두 가지 전환 효과.
✓ Turn.html4.js가 포함된 IE 8과 같은 구형 브라우저에서 작동합니다.

jQuery 1.3 이상이 필요합니다.

Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8

장치
✓ 모든 iOS(iPad, iPhone, iPod)
✓ Android(Android용 Chrome)

개선 사항

Turn.js 4 in it 코어에 일련의 중요한 성능 개선이 이루어졌습니다.

✓ 새로운 DOM 구성은 페이지 크기에 관계없이 동일한 성능을 보장합니다.

Complement

turn.html4.js - Turn.js의 HTML4 버전입니다.

가위.js - Turn.js는 두 부분으로 나뉩니다.

hash.js - pushState 및 URI 해시를 사용하여 탐색 기록을 제어합니다.

API 문서

turn.js API는 jQuery용 UI 플러그인으로 편리하게 구축되어 일련의 기능에 대한 액세스를 제공하고 사용자 상호 작용을 정의할 수 있습니다.

옵션

가속

autoCenter 자동 센터링
방향 방향
디스플레이 디스플레이
지속 시간
그라디언트 그라데이션
높이 height
elevation
페이지 페이지
페이지
turnCorners
실행 시
너비
z 움 확대 및 축소

애니메이션 애니메이션

방향 방향
디스플레이 디스플레이
비활성화
페이지 페이지
페이지
사이즈
options
보기 보기
확대

addPage

center
destroy
방향
display
disable
hasPage
다음
is
page
pages
peel
이전
range
removePage
resize
size
stop
version
zoom

missing

시작
회전
turned
zooming
CSS 수업 수업 class

.odd

.own -사이즈
.page
.p[0-9]+
.shadow
.sheet

附录demo 代码

demo && 代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #flipbook div {
                text-align: center;
                line-height: 500px;
            }
            .backward,
            .forward{
                width: 40px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <!-- 官方示例代码 -->
        <!-- <div id="flipbook">
            <div class="hard">  Turn.js  </div>
            <div class="hard"> </div>
            <div>  第1页 </div>
            <div>  第2页 </div>
            <div>  第3页 </div>
            <div>  第4页 </div>
            <div class="hard"> </div>
            <div class="hard"> </div>
        </div> -->

        <div id="flipbook">
          <div style="background: pink;" class="hard"> </div>
          <div style="background: olivedrab;" class="hard"> </div>
          <div style="background: palegoldenrod;"> Page 1 </div>
          <div style="background: paleturquoise;"> Page 2 </div>
          <div style="background: plum;"> Page 3 </div>
          <div style="background: mediumaquamarine;"> Page 4 </div>
          <div style="background: greenyellow;"> Page 5 </div>
          <div style="background: darkkhaki;"> Page 6 </div>
          <div style="background: aqua;" class="hard"> </div>
          <div style="background: teal;" class="hard"> </div>
        </div>

        <!-- 前一页 -->
        <img src="img/backward.png" class="backward" onclick="backwardPage()">
        <!-- 后一页 -->
        <img src="img/forward.png" class="forward" onclick="forwarPage()">
    </body>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/turn.min.js"></script>
    <script>
        $("#flipbook").turn({
          width: 600,
          height: 500,
          // acceleration: true, // 是否加速，对于触摸屏的设备，这个值必须为true
          // autoCenter: true, // 是否居中 默认值false
          // direction: "ltr", // 翻书方向，值为rtl / ltr（3种写法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
          display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)
        });

        function backwardPage() {
            $("#flipbook").turn("previous");
        }

        function forwarPage() {
            $("#flipbook").turn("next");
        }
    </script>
</html>

로그인 후 복사

demo如下：

按钮图片：