页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

整屏切换组件fullPage

图像相册 布局 HTML我帮您 1年前  次浏览
整屏切换组件fullPage这是一个不使用jQuery小巧的框架(不到9KB),兼容桌面端(ie5.5+) 和 手机端,你可以用它来构建你的个人主页或者网页应用 整屏切换组件fullPage 设置 id String - 外层包裹id slideTime Integer (default:800) - 每页切换时间(毫秒) effect Object (default:{}) - 效果参数 continuous Boolean (default:false) - 是否循环(即能从最后页跳到第一页面) transform translate String 切换方向 'X'|'Y'|'XY'|'none' 表示 X轴|Y轴|XY轴|无 scale Array 缩放 [scalefrom, scaleto] 表示 [起始缩放比例, 结束时缩放比例] rotate Array 旋转 [rotatefrom, rotateto] 表示 [起始旋转角度, 结束时旋转角度] opacity Array 透明度 [opacityfrom, opacityto] 表示 [起始透明度, 结束时透明度] mode String (default:'') - 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id' onSwipeStart Function - 触摸开始时的回调函数 当 retrun 'stop' 时,此次触摸将不会生效 beforeChange Function - 滑动开始时的回调函数 当 retrun 'stop' 时,此次滑动将还原 callback Function - 滑动结束后的回调函数
runSection = new FullPage({

	id : 'article',                            // id of contain
	slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
        	translate : 'Y',					   // 'X'|'Y'|'XY'|'none'
        	scale : [0, 1],					   // [scalefrom, scaleto]
        	rotate : [0, 0]					   // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
	mode : 'touch,wheel',               // mode of fullpage
	easing : [0, .93, .39, .98],
	callback : function(index, thisPage) {     // callback when pageChange

        if (index === 0) {
        	autoPlay(runPage.thisPage() + 1);
        } else {
        	clearTimeout(interval);
        }
    }
});

interval = setTimeout(function() {
    runPage.go(runPage.thisPage() + 1);
}, 5000);

相关链接

版权所有

发表评论