ホームページ > ウェブフロントエンド > htmlチュートリアル > スワイパーの基本的な使い方 (16)

スワイパーの基本的な使い方 (16)

黄舟
リリース: 2017-01-20 15:42:52
オリジナル
1473 人が閲覧しました

このコンテンツでは、スワイパーページでのページめくりアニメーション-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 中国語 Web サイト (www.php.cn) に注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート