当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div id="pageContain">  
    <div class="page page1 current">
        <div class="contain">
            
        </div>
    </div>
    
</div>
 

<ul id="navBar">
    <li>0</li>
    
</ul>
    
```         
你可以在page的div上加上 data-step属性, 当含有这个属性时, 你可以创造出不切屏的逐桢动画, fullpage会为你自动添上step1,step2,step3这些 class, 并且在step终止时切屏。

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

```html
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事件监听。

```html
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页。