真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司

028-86922220

swiper的基礎使用（十六）

本文為H5EDU機構官方的HTML5培訓教程 swiper教程。
這次內容我們接著介紹在swiper頁面的翻頁動畫--3D方塊效果。

首先搭建swiper頁面，設置CSS樣式，為了觀看效果，這一章依然在slide當中添加背景圖片。

創(chuàng)新互聯(lián)公司服務項目包括雞冠網站建設、雞冠網站制作、雞冠網頁制作以及雞冠網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，雞冠網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到雞冠省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

然后在js當中進行初始化以及添加翻頁動畫。依然是一條屬性，但是有些不同。

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

那么除了直接添加的屬性意外，我們的翻頁動畫當中還有著自己的屬性，就是這里

cube:{
                    shadow:true,   //陰影效果，如果設置為false下面的就不用
                    slideShadows:true,  //頁面陰影效果
                    shadowOffset:20,  //陰影的偏移值
                    shadowScale:0.94  //陰影的大小
                }

這樣就實現了3D方塊的翻頁效果

點擊進入swiper強化教程

網站欄目：swiper的基礎使用（十六）
標題來源：http://weahome.cn/article/jpespe.html