zoukankan      html  css  js  c++  java
  • iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖。它能够处理任何元素,例如图片或者DOM元素。它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动。兼容主流浏览器,懒人图库推荐下载!

    使用方法:

    1、你需要为iSlider先新建好数据:

    var data = [{

       height: 475,

        400,

       content: "imgs/1.jpg",

    },{

       height: 527,

        400,

       content: "imgs/2.jpg",

    },{

       height: 400,

        512,

       content: "imgs/3.jpg",

    }];

    在页面插入以下HTML代码:

    <div id="iSlider-wrapper"></div>

    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' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'

    },{

       'height' : '100%',

       'width' : '100%',

       'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'

    },{

       'height' : '100%',

       'width' : '100%',

       'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'

    }];

    其他更多的配置选项请看:

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

  • 相关阅读:
    Eclipse RCP应用程序无法关闭,需在进程栏关闭
    JAVA代码BUG检测工具
    Eclipse客户端程序中多线程的使用(转载)
    geotools获取shapefile 属性名乱码问题
    近距离P2P通讯技术平台 Alljoyn
    Eclipse a tale of two VMs (and many classloaders) (转载)
    深入 Eclipse 多线程机制(转载)
    Top 10 mistakes in Eclipse Plugin Development
    EclipseRCP软件的P2升级资料收集
    java事件处理机制 自定义事件(转载)
  • 原文地址:https://www.cnblogs.com/axl234/p/4156132.html
Copyright © 2011-2022 走看看