这是一款可以兼容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。滑动结束后的回调函数。
事件
该全屏切换插件提供了一些接口供使用此插件的开发者调用。
-
prev()
:直接滑向上一页。 -
next()
:直接滑入下一页。 -
thisPage()
:返回当前的页码。 -
go(num)
:直接滑到第num页。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!