zoukankan      html  css  js  c++  java
  • 模拟iphone桌面切屏carousel小类库

    1)做什么的:

    由于翻遍jquery mobile,也没有找到满意的,模拟iphone桌面切屏功能类库。

    分享一个最近写的carousel小类库,第一次发布,难免有些bug,后续维护。

    主要针对智能移动设备,模拟iphone桌面切屏的小js类库。

    2)代码和示例地址:github:https://github.com/withasi/es_Carousel

    一个示例说明:http://182.92.83.234/carousel/

    3)类说明如下:

      

    /************** define: start  **************/
    /**
     * @class:  Carousel类
     * @example  var testCarousel = new es.Carousel("view","content")
     * @param overviewEl {HTMLElement|String} 为视角容器,为视角容器,即 Carousel的视角
     * @param contentEl {HTMLElement||String} 为上边容器的子容器,内容区的容器,宽度为page之和,为page页面的父容器
     * @param options {Object} 构造设置,参数说明:
     *           {
                    clientWidth : window.innerWidth, //客户区宽度
                    clientHeight : window.innerHeight, //客户区高度
                    swipeTime:300,//切换时间,单位为ms
                    pageSwitchThred:100,//页面切换阈值,单位为px。表示当左右切换时,当切换的宽度为大于pageSwitchThred时,无论速度,在弹起时均切换
                    isIndicator:true,//是否创建指示器
                    useTransform:true, //如果没有采用transform,则直接通过改变style的top和left属性
                    useTransition:true //如果没有采用Transition,则设定style的top和left作为变换属性,而非指定transform
                }
     * @public
     */

    4)应用举例如下:

    /************** example: start  **************/
     <div class="view" id="view">
         <div id="content" class="carouselContent">
             <div class="contentpage">
                 <p>page 1</p>
             </div>
             <div class="contentpage">
                 <p>page 2</p>
             </div>
             <div class="contentpage">
                 <p>page 3</p>
             </div>
         </div>
     </div>
     </body>
     <script type="text/javascript">
         window.onload = function(){
             /**
              * @description:  Carousel类
              * @param overviewEl {HTMLElement||String} 为视角容器,为视角容器,即 Carousel的视角
              * @param overviewEl {HTMLElement||String} 为上边容器的子容器,内容区的容器,宽度为page之和,为page页面的父容器
              * @param options {Object} 构造设置
              *           {
                     clientWidth : window.innerWidth, //客户区宽度
                     clientHeight : window.innerHeight, //客户区高度
                     swipeTime:300,//切换时间,单位为ms
                     pageSwitchThred:100,//页面切换阈值,单位为px。表示当左右切换时,当切换的宽度为大于pageSwitchThred时,无论速度,在弹起时均切换
                     isIndicator:true//是否创建指示器
                 }
              * @type {*}
              */
             var testCarousel = new es.Carousel("view","content");
         }
     </script>
     /************** example: end  **************/
  • 相关阅读:
    Selenium实战(七)——自动发送邮件
    Selenium实战(六)——数据驱动应用
    Selenium实战(四)——unittest单元测试3(测试用例的执行顺序)
    Selenium实战(四)——unittest单元测试2(断言方法+discover()多测试用例的执行)
    运维工具
    实用的shell脚本面试题和答案
    mssql2000 数据库一致性错误修复
    c#基础
    任务表 步骤表
    BPM事件
  • 原文地址:https://www.cnblogs.com/withasi/p/2935663.html
Copyright © 2011-2022 走看看