跨浏览器和兼容手机浏览器的全屏页面切换js插件-HTML源码网

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

发布5年前浏览968次上传者

ayumi

1.8 金币 VIP免费

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长(44784009#qq.com),将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

这是一款可以兼容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-->

你可以在page的div上加上 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。滑动结束后的回调函数。