美高梅平台下载-美高梅娱乐平台登录

热门关键词: 美高梅平台下载,美高梅娱乐平台登录

多说一句(一般的整屏滚动页面,如今我们经常

日期:2020-04-26编辑作者:美高梅娱乐平台登录

说到滚屏插件,我主要接触过touchSwipe和FullPage,两者各有优点吧。就我个人认为,前者更加适合新手,简单,易上手;后者适合高端的开发者。

美高梅平台下载 1pc-a3e1637a-7960-11e4-bf1d-00163e001348.png

时间: 2018-03-23阅读: 788标签: 全屏fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。 主要功能有:支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等API

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。

作为前端开发,页面修改是难免的,这不本来好好地首页,UI妹子告知首页需要调整整屏滚动,没办法只能修改了(可惜了之前为了视差滚动写的代码了);虽说这类交互,手写代码对自己最有利了,可是为了开发效率所以利用插件了,毕竟一个优秀的插件功能是很齐全的,使用起来是方便的很哪!因此我就开始寻找理想的中的插件了,找了好几款,也使用了下,最终觉得这个fullPage是最能满足当前这个需求的了,因此就它了。先简单介绍下它有哪些功能:

sectionsColor:['green','orange','red','lime'];//设置背景颜色可以为每一个section设置background-color属性

今天主要想给大家介绍的是FullPage了,如何实现全屏滚动且实现视觉差效果,至于touchSwipe以后也会讲到。

美高梅平台下载,支持鼠标滚动、前进后退和键盘控制、多个回调函数、支持手机和平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式总的来说功能挺齐全的,而且使用起来也是很方便。

controlArrows:定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,则幻灯片左右的箭头消失,在移动端上我们可以通过滑动来控制幻灯片

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

引入文件:fullPage是基于jquery编写的,所以必须引入了jquery了,我们还需要入jquery.easings.min.js,它是必须的,用于 easing 参数,或者也可以使用完整的 jQuery UI 代替,最后就是fullPag本身了,还有就是引入它的css文件了,引入代码如下:

verticalCentered:每一页的内容是否垂直居中,默认为true

支持前进后退和键盘控制

<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery.easings.min.js"></script><script src="js/jquery.fullPage.js"></script>

resize:字体是否随着窗口缩放而缩放,默认为false

美高梅娱乐平台登录,支持手机、平板触摸事件

HTML写法:

scrollingSpeed:滚动速度,单位为毫秒,默认为700

支持 CSS3 动画

<div > <div >第一屏</div> <div >第二屏</div> <div >第三屏</div> <div >第四屏</div></div>

anchors:定义锚链接,默认值是[]。有了锚链接,用户可以快速打开定位到某一页面。注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其在IE下,而且定义时不需要加#

窗口缩放时自动调整

JS写法:

lockAnchors:是否锁定锚链接,默认为false,若设置为true,则定义的锚链接就没有效果,使用较少

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

$(function(){ $('#fullpage').fullpage;

easing:定义页面section滚动的动画方式,默认为easeInOutCubic,如果修改则需引入jquery.easings插件,或者jquery ui.

兼容性 jQuery 兼容:

这样写就完成了,整屏滚动效果就出来了!

css3:是否使用CSS3 transforms来实现滚动效果,默认为true。可提高支持css3的浏览器(如移动设备等的速度),若浏览器不支持css3,则会使用jquery来代替css3实现滚动效果。(传说中的优雅降级)

兼容 jQuery 1.7+

先说几个常用的:页面滑动速度:scrollingSpeed是否显示导航栏:navigation 多说一句(一般的整屏滚动页面,按开发人员意识交互增强,而按使用者交互就少,所以这种整屏滚动的最后要加上导航栏,否则容易使使用者迷路)。回调函数:conLeave -- 滚动前调用回调函数afterLoad -- 滚动到某一屏后的回调函数代码:

loopTop:滚动到最顶部后是否连续滚动到底部,默认false

浏览器兼容:

$(function(){ $('#fullpage').fullpage({ 'navigation': true, onLeave: function(anchorLink, index){ if{ console.log; console.log); $.removeClass('top-bottom').addClass('top-top'); $('.nav-search').show(); }else{ $('.nav-search').hide(); $.removeClass('top-top').addClass('top-bottom'); } }, }); });

loopBottom:滚动到最底部后是否连续滚动回顶部,默认false

IE8/谷歌/火狐/Opera/苹果浏览器

完整补充:

loopHorizontal:横向slide幻灯片是否循环滚动,默认为true

使用方法 1、引入文件:

名称 |类型| default |说明---|---|---verticalCentered |字符串| true |内容是否垂直居中verticalCentered |字符串 |true |内容是否垂直居中resize |布尔值 |false |字体是否随着窗口缩放而缩放slidesColor |函数 |无 |设置背景颜色anchors |数组 |无 |定义锚链接scrollingSpeed |整数 |700 |滚动速度,单位为毫秒easing |字符串 |easeInQuart |滚动动画方式menu |布尔值 |false |绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动navigation |布尔值 |false |是否显示项目导航navigationPosition |字符串 |right |项目导航的位置,可选 left 或 rightnavigationColor |字符串 |#000 |项目导航的颜色navigationTooltips |数组| 空 |项目导航的 tipslidesNavigation |布尔值 |false |是否显示左右滑块的项目导航slidesNavPosition |字符串 |bottom |左右滑块的项目导航的位置,可选 top 或 bottomcontrolArrowColor |字符串 |#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|

autoScrolling:是否使用插件的滚动方式,默认为true,变为false则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动

2、HTML:

名称 |方法---|---|---moveSectionUp() |向上滚动moveSectionDown() |向下滚动moveTo(section, slide) |滚动到moveSlideRight() |slide 向右滚动moveSlideLeft() slide |向左滚动setAutoScrolling() |设置页面滚动方式,设置为 true 时自动滚动setAllowScrolling() |添加或删除鼠标滚轮/触控板控制setKeyboardScrolling() |添加或删除键盘方向键控制setScrollingSpeed() |定义以毫秒为单位的滚动速度

scrollBar:是否包含滚动条,默认为false。设置为true,则出现浏览器自带的滚动条,页面滚动还是按页滚动,但滚动条的默认行为也有效

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

名称 |方法---|---|---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个参数

paddingTop/paddingBottom:设置每一个section顶部和底部的padding,默认都是0。一般如果需要设置一个固定在顶部或者底部的菜单、导航、元素等,可以使用这两个配置项。

每个page代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 page 加上 class="current”,如:

fixedElements:固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动。

3、Javascript:

keyboardScrolling:是否可以使用键盘方向键导航,默认为true。

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;

touchSensitivity:在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大滑动越难

环境配置 1、属性

continuousVertical:是否循环滚动,默认为false。如果为true,则页面会循环滚动,它不会像loopTop和loopBottom那样出现跳动。(它和loopTop、loopBottom不兼容,不要同时设置)

选项

animateAnchor:锚链接是否可以控制滚动动画,默认为true。若为false,则通过锚链接定位到某个页面显示不再有动画效果。

本文由美高梅平台下载发布于美高梅娱乐平台登录,转载请注明出处:多说一句(一般的整屏滚动页面,如今我们经常

关键词:

中文官网【美高梅平台下载】,用它来开发手机

在我们平时开发的时候,用jQuery很多,可能忽视了Zepto,其实他也是一个不错的选择。jQuery和Zepto都是javascript的框架,...

详细>>

默认状态,但是不建议使用name去获得特定的表单

最近忙得不可开交,都没时间更新了,年底了嘛,为了冲KPI,公司的活动项目一个接一个呀,为了年底有个好收成,...

详细>>

原生App是专门针对某一类移动设备而生的,关于

HTML5,在2015年会再次兴起,我们都知道YouTube已经开始全面支持HTML5了,只要进入youtube.com/html5就可以体验。虽然在PC端...

详细>>

事件可以执行,只有再触发一个触屏事件时

对于以为WEB前端工作人员来说,必须得了解PC和移动端那些鼠标和触屏事件。下面就简单的介绍下:   1、Touch事件简...

详细>>