• JS特效 http://www.crzcf.com/js/
  • iSlider手機平臺JS滑動組件

    發布日期:2014-11-12 20:28:56
    Tag標簽:組件  手機  平臺  


    iSlider手機平臺JS滑動組件,無任何插件依賴。它能夠處理任何元素,例如圖片或者DOM元素。它有如下特性:能夠自定義動畫,自帶的動畫包括default, rotate, flip 和 depth你能夠簡易地添加回調函數(onslidestart, onslide, onslideend, onslidechange)我們還支持滑動衰減效果,循環效果,自動滑動效果,水平/垂直滑動。兼容主流瀏覽器,次元立方推薦下載!

     

    使用方法:

    1、你需要為iSlider先新建好數據:

    var data = [{

       height: 475,

       width: 400,

       content: "imgs/1.jpg",

    },{

       height: 527,

       width: 400,

       content: "imgs/2。jpg",

    },{

       height: 400,

       width: 512,

       content: "imgs/3.jpg",

    }];

     

    在頁面插入以下HTML代碼:

     

     

     

     

    2 要使其運行,按下面例子新建ISlider類:

    <script type="text/javascript">

       var iSlider = new iSlider({

           dom : document.getElementById('iSlider-wrapper'), // iSlider-wrapper于html代碼里的id對應

           data : data

       });

    </script>

     

    3 如果你想加其它效果,可以按照我們demo/picture示例添加:

    <script type="text/javascript">

       var islider = new iSlider({

               data: list,

               dom: document.getElementById("iSlider-wrapper"),

               isVertical: true,

               isLooping: false,

               isDebug: true,

               isAutoplay: false,

               animateType: 'rotate'

       });

    </script>

     

    4 如果你想滑動DOM元素而非圖片,你可以按以下的格式新建DOM數據:

    var data = [{

       'height' : '100%',

       'width' : '100%',

       'content' : '

    Home

    This is home page

    home is pretty awsome

    '

     

    },{

       'height' : '100%',

       'width' : '100%',

       'content' : '

    Page1

    This is page1

    page1 is pretty awsome

    '

     

    },{

       'height' : '100%',

       'width' : '100%',

       'content' : '

    Page2

    This is Page2

    Page2 is pretty awsome

    '

     

    }];

     

    其他更多的配置選項請看:

    http://be-fe。github。io/iSlider/index。html

    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    网赚平台是真的吗 中华彩票网 贵州11选5 555彩注册 创世纪网赚是真的吗 巨力网赚论坛 2019最新网赚商机 四川快乐12走势图 四川快乐12走势图 2019最新网赚商机