我主要接触过touchSwipe和FullPage

来源:http://www.4008831535.com 作者:手机购彩appweb前端 人气:164 发布时间:2020-05-03
摘要:聊到滚屏插件,我入眼接触过touchSwipe和FullPage,两个各有独特之处吧。就自己个人以为,前边多少个尤其符合生手,简单,易上手;前面一个切合高等的开采者。 近日大家平日能看见全

聊到滚屏插件,我入眼接触过touchSwipe和FullPage,两个各有独特之处吧。就自己个人以为,前边多少个尤其符合生手,简单,易上手;前面一个切合高等的开采者。

近日大家平日能看见全屏网址,尤其是海外网址。这个网址用几幅相当的大的图样或色块做背景,再加多一些轻巧的从头到尾的经过,显得格外的高等大气上等级次序。

今日重大想给大家介绍的是FullPage了,怎样贯彻全屏滚动且完结视觉差效果,至于touchSwipe以后也会讲到。

fullPage.js 是二个依照 jQuery 的插件,它亦可很方便、相当的轻便的炮制出全屏网址,首要功用有:

支撑发展后退和键盘调整

襄帮手提式有线电话机、平板触摸事件

支持 CSS3 动画

窗口缩放时自动调度

可安装滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐情势等等

兼容性 jQuery 兼容:

兼容 jQuery 1.7+

浏览器包容:

IE8/谷歌(Google卡塔尔国/火狐/Opera/苹果浏览器

应用办法 1、引进文件:

2、HTML:

   这里是第一竖屏 This is section1     这里是第二竖屏 This is section2     这里是第三竖屏 This is section3     这里是第四竖屏 This is section4  

每一种page代表一屏,默认显示“第一屏”,要是要内定加载页面时显得的“显示器”,能够在相应的 page 加上 class="current”,如:

3、Javascript:

var interval;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 { // callback when pageChange clearTimeout;

情状布置 1、属性

选项

类型

默认值

说明

verticalCentered 字符串 true 内容是不是垂直居中 resize 布尔值 false 字体是不是随着窗口缩放而缩放 slidesColor 函数 无 设置背景颜色 anchors 数组 无 定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为飞秒 easing 字符串 easeInQuart 滚动动漫方式 menu 布尔值 false 绑定菜单,设定的有关属性与 anchors 的值对应后,菜单能够决定滚动 navigation 布尔值 false 是还是不是出示档案的次序导航 navigationPosition 字符串 right 项目导航之处,可选 left 或 right navigationColor 字符串 #000 项目导航的水彩 navigationTooltips 数组 空 项目导航的 tip slidesNavigation 布尔值 false 是不是出示左右滑块的体系导航 slidesNavPosition 字符串 bottom 左右滑块的连串导航的职责,可选 top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最头部后是或不是滚回最上部 loopTop 布尔值 false 滚动到最顶端后是还是不是滚后面部分loopHorizontal 布尔值 true 左右滑块是还是不是循环滑动 autoScrolling 布尔值 true 是不是选用插件的轮转方式,若是选择 false,则会冒出浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是不是出示滚动条 css3 布尔值 false 是还是不是接受 CSS3 transforms 滚动 paddingTop 字符串 0 与最上部的相距 paddingBottom 字符串 0 与尾部间隔 fixedElements 字符串 无 normalScrollElements 无 keyboardScrolling 布尔值 true 是或不是利用键盘方向键导航 touchSensitivity 整数 5 continuousVertical 布尔值 false 是还是不是循环滚动,与 loopTop 及 loopBottom 不宽容 animateAnchor 布尔值 true normalScrollElementTouchThreshold 整数 5 2、方法

名称

说明

moveSectionUp(卡塔尔 向上滚动 moveSectionDown(State of Qatar 向下滚动 moveTo 滚动到 moveSlideRight(State of Qatar slide 向右滚动 moveSlideLeft(State of Qatar slide 向左滚动 setAutoScrolling(卡塔尔 设置页面滚动情势,设置为 true 时自动滚动 setAllowScrolling(卡塔尔国 增多或删除鼠标滚轮/触控板调整 setKeyboardScrolling(卡塔尔增加或删除键盘方向键调控 setScrollingSpeed(卡塔尔 定义以皮秒为单位的轮转速度 3、回调函数

名称

说明

afterLoad 滚动到某一屏后的回调函数,采用 anchorLink 和 index 三个参数,anchorLink 是锚链接的名号,index 是序号,从1从头总括 onLeave 滚动前的回调函数,选择 index、nextIndex 和 direction 3个参数:index 是偏离的“页面”的序号,从1始发计算;

nextIndex 是滚动到的“页面”的序号,从1起来估摸;

direction 判别往上滚动照旧往下滚动,值是 up 或 down。

afterRender 页面布局变迁后的回调函数,或许说页面初步化完结后的回调函数 afterSlideLoad 滚动到某一品位滑块后的回调函数,与 afterLoad 相像,接纳anchorLink、index、slideIndex、direction 4个参数 onSlideLeave 某一水准滑块滚动前的回调函数,与 onLeave 雷同,采纳anchorLink、index、slideIndex、direction 4个参数

大家能够看下案例:DEMO

本文由手机购彩软件发布于手机购彩appweb前端,转载请注明出处:我主要接触过touchSwipe和FullPage

关键词:

上一篇:在微信里打开有问题

下一篇:没有了

最火资讯