滑屏組件----slide

Me_Kun 發(fā)布于2019-08-22 10:58 / 2700人閱讀

摘要：滑屏組件自定義滑屏組件，可定制滑屏動畫可控制每屏動畫效果訪問滑屏組件必填傳入滑動容器選填滑動時切換動畫，默認選填記錄當前瀏覽頁面選填切換完成回調(diào)選填下滑完成時回調(diào)選填上滑完成時回調(diào)選填滑動過程動畫效果必填，傳入滑動容器選填，滑動時切換動

slide

滑屏組件

自定義滑屏組件，可定制滑屏動畫

可控制每屏動畫效果

Install

git clone https://github.com/jayZOU/slide.git
npm install
gulp

訪問http://localhost:8080/

Examples

    /**
    *    slide 滑屏組件
    *    @author jayzou
    *    @time 2015-10-25
    *    @version 0.0.1
    *    @class Slide
    *    @param String    wrap                    必填    傳入滑動容器ID
    *    @param String    currentClass            選填    滑動時切換動畫class，默認current
    *    @param boolean   startLocalstorage       選填    記錄當前瀏覽頁面
    *    @param {Object}  onChange                選填    切換完成回調(diào)
    *    @param {Object}  onDownChange            選填    下滑完成時回調(diào)
    *    @param {Object}  onUpChange              選填    上滑完成時回調(diào)
    *    @param {Object}  defaultClass            選填    滑動過程動畫效果
    **/

    var slide = new Slide({
        wrap: "wrap",                    //必填，傳入滑動容器ID
        currentClass: "current",        //選填，滑動時切換動畫class
        startLocalstorage: false,        //選填，是否開啟localstorage記錄頁面返回后是否回到上次訪問的頁面，默認false
        onChange: function(){            //選填，每屏切換完成時的回調(diào)
            console.log("onchange");
        },
        onDownChange: function(){        //選填，下滑完成時回調(diào)
            console.log("onDownChange");
        },
        onUpChange: function(){        //選填，上滑完成時回調(diào)
            console.log("onUpChange");
        },
        defaultClass: {                    //選填，滑動過程動畫效果
            "webkitTransition": "-webkit-transform 0.5s ease",    //需要加前綴
            "transform": "translate(0px, 0px)"                    //不需要加前綴
        },
    });

    // slide.next();                        //下一頁
    // slide.prev();                        //上一頁
    // slide.playTo(3);                        //直接跳轉(zhuǎn)第n頁
    // console.log(slide.getPage());        //獲取為當前頁數(shù)
    // slide.lockPage();                    //鎖住屏幕，禁止滑動
    // slide.unLockPage();                    //解鎖屏幕，允許滑動

    //輔助類
    // slide.toggleClass(targ, className);    //置換class
    // slide.addClass(targ, className);        //添加class
    // slide.removeClass(targ, className);    //刪除class
    // slide.css(o, style);                    //添加style樣式

Notes

滑動容器只能傳入ID值，不允許傳入class

GPU云服務器云服務器滑屏移動視圖類 slide Sliding slide menu

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91545.html

Transition 實現(xiàn)輪播圖

摘要：關于輪播圖的實現(xiàn)算是前端的一個基礎，其實實現(xiàn)起來是很簡單，這里把實現(xiàn)的基本思路總結(jié)一下。推薦使用，它是一款開源的移動端腳本框架，它可以完美的實現(xiàn)在移端開發(fā)的大多數(shù)事件，如點擊滑動拖動多點觸控等事件。關于輪播圖的實現(xiàn)算是前端的一個基礎，其實實現(xiàn)起來是很簡單，這里把實現(xiàn)的基本思路總結(jié)一下。輪播圖的實現(xiàn)方案有很多種方式，可以用純js來實現(xiàn)，也可用css來實現(xiàn)，我們這里主要用到了css3的過...

pf_miles 2019-08-30 15:52 評論0 收藏0
微信小程序仿微信SlideView組件slide-view

摘要：使用安裝從小程序基礎庫版本或以上及開發(fā)者工具或以上開始，小程序支持使用安裝第三方包。節(jié)點用于承載滑動時所展示的節(jié)點，其寬度應于傳入的相同。微信小程序仿微信SlideView組件。使用 1、安裝 slide-view 從小程序基礎庫版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。 npm install --save...

mikyou 2019-08-23 12:30 評論0 收藏0
50行代碼搞定無限滑動幻燈片

摘要：對，滑動式幻燈片的關鍵就在于隱藏。在條件里我們添加一個事件相當于滑動后的回掉，依賴這個事件在幻燈片滑動執(zhí)行完畢后立即執(zhí)行里面的閃回操作。通過添加事件監(jiān)聽滑動是否結(jié)束從而迅速閃回，達到貌似無限滑動的效果。 slider輪播組件，在各類網(wǎng)站上出現(xiàn)及其頻繁，有漸隱式的，滑動式的等等一系列。栗子在這: 但我當初學習寫輪播時卻被各種入門教程搞得焦頭爛額。不是代碼太復雜，就是封裝太嚴重，初學者很難...

yimo 2019-08-20 14:35 評論0 收藏0