跨浏览器和兼容手机浏览器的全屏页面切换js插件

当前位置:主页 > jQuery库 > 布局和界面 > 跨浏览器和兼容手机浏览器的全屏页面切换js插件
跨浏览器和兼容手机浏览器的全屏页面切换js插件
分享:

    插件介绍

    这是一款可以兼容IE5.5+和移动手机浏览器的全屏页面切换js插件。它不依赖于jQuery,可以构建速度更快,页面更简洁的全屏切换效果。并且带自动页面切换功能,制作类似全屏幻灯片的效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-06-29
    阅读:
简要教程

这是一款可以兼容IE5.5+和移动手机浏览器的全屏页面切换js插件。它不依赖于jQuery,可以构建速度更快,页面更简洁的全屏切换效果。并且带自动页面切换功能,制作类似全屏幻灯片的效果。

使用方法

HTML结构

该全屏切换插件需要使用下面的基本HTML结构。

<div id="pageContain">  
    <div class="page page1 current">
        <div class="contain">
            <!-- your own code here-->
        </div>
    </div>
    <!-- ect.. -->
</div>

<!--alternative-->
<ul id="navBar">
    <li>0</li>
    <!-- ect.. -->
</ul>
<!--alternative-->              
              

你可以在pagediv上加上 data-step属性, 当含有这个属性时, 你可以创造出不切屏的逐桢动画, fullpage会为你自动添上step1,step2,step3这些 class, 并且在step终止时切屏。

初始化插件

可以使用下面的方法来初始化该全屏切换插件。

var runPage = new FullPage({

  id : 'pageContain',                            // id of contain
  slideTime : 800,                               // time of slide
  continuous : false,                            // create an infinite feel with no endpoints
  effect : {                                     // slide effect
          transform : {
            translate : 'Y',                      // 'X'|'Y'|'XY'|'none'
            scale : [.1, 1],                      // [scalefrom, scaleto]
            rotate : [0, 0]                       // [rotatefrom, rotateto]
          },
          opacity : [0, 1]                       // [opacityfrom, opacityto]
      },                           
  mode : 'wheel,touch,nav:navBar',               // mode of fullpage
  easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
    //  ,onSwipeStart : function(index, thisPage) {   // callback onTouchStart
    //    return 'stop';
    //  }
    //  ,beforeChange : function(index, thisPage) {   // callback before pageChange
    //    return 'stop';
    //  }
    //  ,callback : function(index, thisPage) {       // callback when pageChange
    //    alert(index);
    //  };
});              
              
JAVASCRIPT

该右键菜单插件使用javascript来监听鼠标点击事件。showMenu()hideMenu()方法分别用于显示和隐藏右键菜单。onContextMenu()方法获取鼠标的当前位置,并添加mousedown事件监听。在onMouseDown()方法中,首先隐藏右键菜单,然后在文档中移除mousedown事件监听。

var menu = document.querySelector('.menu');
function showMenu(x, y){
    menu.style.left = x + 'px';
    menu.style.top = y + 'px';
    menu.classList.add('show-menu');
}
function hideMenu(){
    menu.classList.remove('show-menu');
}
function onContextMenu(e){
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown(e){
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
}
document.addEventListener('contextmenu', onContextMenu, false);                
              

配置参数

  • id:类型:string。外层包裹id。
  • slideTime:类型:Integer,默认值为800。每页切换时间(毫秒)。
  • effect:类型:Object,默认值{}。效果参数。
  • continuous:类型:Boolean,默认值false。是否循环(即能从最后页跳到第一页面)。
    • transform
      • ranslate String:切换方向 'X'|'Y'|'XY'|'none' 表示 X轴|Y轴|XY轴|无
      • scale Array:缩放 [scalefrom, scaleto] 表示 [起始缩放比例, 结束时缩放比例]
      • rotate Array:旋转 [rotatefrom, rotateto] 表示 [起始旋转角度, 结束时旋转角度]
    • opacity Array:透明度 [opacityfrom, opacityto] 表示 [起始透明度, 结束时透明度]
  • mode:类型:string,默认值''。转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'。
  • onSwipeStart:类型:Function。触摸开始时的回调函数。当 retrun 'stop' 时,此次触摸将不会生效。
  • beforeChange:类型:Function。滑动开始时的回调函数。当 retrun 'stop' 时,此次滑动将还原。
  • callback:类型:Function。滑动结束后的回调函数。

事件

该全屏切换插件提供了一些接口供使用此插件的开发者调用。

  • prev():直接滑向上一页。
  • next():直接滑入下一页。
  • thisPage():返回当前的页码。
  • go(num):直接滑到第num页。