创新路
我们一直在努力

H5 单页 滚动js

我们经常能见到H5的全屏网站,滚动鼠标滚轮,就滚动到下一个页面,配上很大的图片做背景,再加一些内容,看起来格外的高大上。

加载css:

jquery.fullPage.css

加载js:

jquery.min.js

jquery.fullPage.js

1576735949167393.png

html内容:

<div id="body">

    <div class="section">

        第一页内容

    </div>

    <div class="section">

      第二页内容

    </div>

    <div class="section">

        第三页内容

    </div>

    <div class="section">

       第四页内容

    </div>

</div>

1576736668122705.png

JavaScript代码:

<script>

$(function(){

$('#body').fullpage({

sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']

});

});

</script>

1576736708926431.png

参数:

verticalCentered(true)——-内容是否垂直居中

resize(false)—–字体是否随着窗口缩放而缩放

slidesColor(无)—–设置背景颜色

anchors—–定义链接

scrollingSpeed(700)—–滚动速度(毫秒)

easing(easeInQuart)——滚动动画方式

menu(false)—–绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动

navigation(false)——是否显示项目导航

navigationPosition(right)——项目导航的位置,可选 left 或 right

navigationColor(#000)—–项目导航的颜色

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(#ffffff)——–左右滑块的箭头的背景颜色

loopBottom(false)——–滚动到最底部后是否滚回顶部

loopTop(false)—–滚动到最顶部后是否滚底部

loopHorizontal(true)———左右滑块是否循环滑动

autoScrolling(true)——–是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条

scrollOverflow(false)——–内容超过满屏后是否显示滚动条

css3(false)——–是否使用 CSS3 transforms 滚动

paddingTop(0)——-与顶部的距离

paddingBottom(0)——–与底部距离

keyboardScrolling(true)———是否使用键盘方向键导航

touchSensitivity(5)

continuousVertical(false)———-是否循环滚动,与 loopTop 及 loopBottom 不兼容

animateAnchor(true)

normalScrollElementTouchThreshold(5)

动画效果:

moveSectionUp() 向上滚动

moveSectionDown() 向下滚动

moveTo(section, slide) 滚动到

moveSlideRight() slide 向右滚动

moveSlideLeft() slide 向左滚动

setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动

setAllowScrolling() 添加或删除鼠标滚轮/触控板控制

setKeyboardScrolling() 添加或删除键盘方向键控制

setScrollingSpeed() 定义以毫秒为单位的滚动速度

未经允许不得转载:天府数据港官方信息博客 » H5 单页 滚动js

客官点个赞呗! (0)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机