스와이프의 기본 사용법 (16)-HTML 튜토리얼-php.cn

스와이프의 기본 사용법 (16)

黄舟

풀어 주다： 2017-01-20 15:42:52

원래의

1482명이 탐색했습니다.

이번 콘텐츠에서는 스와이프 페이지에 페이지 넘기기 애니메이션 - 3D 블록 효과를 소개합니다.

먼저 스와이퍼 페이지를 구축하고 CSS 스타일을 설정하여 효과를 확인하기 위해 이 장에서는 슬라이드에 배경 이미지를 추가합니다.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="logo.png"></div>
                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

로그인 후 복사

그런 다음 js에서 페이지 넘김 애니메이션을 초기화하고 추가합니다. 여전히 속성이지만 약간 다릅니다.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                grabCursor:true,
                effect:&#39;cube&#39;,  //翻页效果：方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

로그인 후 복사

직접 추가된 속성 외에도 페이지 넘기기 애니메이션에는 고유한 속성이 있는데, 여기에 있습니다

cube:{
                    shadow:true,   //阴影效果，如果设置为false下面的就不用
                    slideShadows:true,  //页面阴影效果
                    shadowOffset:20,  //阴影的偏移值
                    shadowScale:0.94  //阴影的大小
                }

로그인 후 복사

이런 방식으로 3D 블록을 넘기는 것은 페이지 효과가 실현됩니다

위는 스와이퍼(16) 기본 사용법 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!