fullpage.js是一款切换效果插件,支持主流浏览器与ie8+,网上的示例多是纵向切换,但是横向切换示例较少,翻看了一下api文档,调用moveTo方法,即可切换至任意纵向任意横向的分屏中,先看下效果
这里没有使用默认导航栏,而是自定义的切换按钮,更加灵活方便,便于修改,页面也使用的是iframe嵌套,官方示例中多是图片背景切换,没有太大的价值,切换代码很简单,首先引用fullpage.js和jquery,页面初始化隐藏默认的横向切换组件,然后对切换按钮事件进行绑定,调用api即可
$(function () {
$('#content').fullpage({
controlArrows: false,
});
$()
$('a').each(function (index) {
$(this).unbind('click').click(function () {
//moveTo方法参数,第一个参数为section的下标,第二个参数为slide的下标
//section为纵向切换,slide为横向切换
$.fn.fullpage.moveTo(1, index);
$("li").removeClass();
$(this).parent('li').addClass("active");
})
})
});