如何使用fullpage.js 教程实现锤子手机的首屏和尾屏的效果

来源：蜘蛛抓取(WebSpider) 时间：2015-11-13 09:46 标签： js首屏加载
问题补充&&
本页链接：
前两天刚好也做了一个类似的页面,这种第一屏和最后一屏的部分滚动通过把滚动的距离改成n**bar或者footer的高度就可以实现,但是fullpage好像没有单独的设置来修改每一次滚动的距离,所以你可能要稍微改一下他的js.判断是否第一/最后一屏,然后算一下高度就OK.
猜你感兴趣如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？
如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？
fullpage.js是一个很好的一页式幻灯片效果插件，但是默认只有一屏一屏的滚动功能。我想知道如何能够使用它实现类似锤子手机页面的首屏和尾屏的效果呢？
1. 首屏有头部，滚动鼠标才切换到第一屏，头部隐藏；
2. 尾屏有个附加信息的底部，在最后一屏滚动鼠标，底部才显示出来。
演示效果：http://www.smartisan.com/#/overview
如果给底部加通底&div class="section fp-auto-height"&&/div&亲测有效！
修改一下滚动相关代码，判断当前页面应该就好了，参考：http://www.gbtags.com/gb/gbliblist/84.htm
参考这个实现方式http://jsfiddle.net/reddy887/o4uywjrn/
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&
&link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.css"&
&script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"&&/script&
&script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/vendors/jquery.easings.min.js"&&/script&
&script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.9/jquery.fullPage.min.js"&&/script&
&script type="text/javascript"&
$(function()
// 由于 fullpage 没设置事件队列池清空方法，导致划屏操作会重复，发生跳页现象
// 使用 alert 结束事件队列，考虑到用户体验，我设计了一个延迟锁定器来结束队列
// fullpage 官网地址 https://github.com/alvarotrigo/fullPage.js/
// 我太忙，使用这个代码的用户请到 github 提交一个 issues 请开发者加入 clearEvents 方法
function lock()
clearTimeout(timer);
= setTimeout(function()
$('#fullpage').fullpage(
sectionsColor
'#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'
navigation
// 显示导航
loopBottom
// 顶部轮滚
// 顶部轮滚
// 开启CSS3动画
: function( index, nextIndex, direction )
= $("#box");
if ( index===1 && nextIndex===4 )
box.addClass("top");
if ( index===1 && nextIndex===2 && box.hasClass("top") )
box.removeClass("top");
if ( index===4 && nextIndex===1 )
box.addClass("bottom");
if ( index===4 && nextIndex===3 && box.hasClass("bottom") )
box.removeClass("bottom");
// 返回事件阻塞
return flag
&style type="text/css"&
transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
-webkit-transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
transform: translate3d(0px, 200px, 0px);
-webkit-transform: translate3d(0px, 200px, 0px);
#box.bottom
transform: translate3d(0px, -200px, 0px);
-webkit-transform: translate3d(0px, -200px, 0px);
&div id="box"&
&div id="fullpage"&
&div style="height:200 background:red"&&/div&
&div class="section"&
&h3&第一屏&/h3&
&div class="section"&
&h3&第二屏&/h3&
&div class="section"&
&h3&第三屏&/h3&
&div class="section"&
&h3&第四屏&/h3&
&div style="height:200 background:blue"&&/div&
这个简单撒，直接CLASS加个属性就OK了 他插件自带的属性比如你的尾页友情链接是这个&div class="section
fp-auto-height"& 加一个这个CLASS就行了：fp-auto-height 亲测有用
前两天刚好也做了一个类似的页面,这种第一屏和最后一屏的部分滚动通过把滚动的距离改成navbar或者footer的高度就可以实现,但是fullpage好像没有单独的设置来修改每一次滚动的距离,所以你可能要稍微改一下他的js.判断是否第一/最后一屏,然后算一下高度就OK.
问题解决了吗
正好也遇到了
解决了的给个答案把。。 在线等，挺急的
能看下你们改好的成品吗？
Copyright & 2016 phpStudy他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)手机门户>>
热门点击>>
手机腾讯>>
电脑上wap网：fullpage,jquery_如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？，fullpage,jquery,前端 - phpStudy
fullpage,jquery_如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？，fullpage,jquery,前端 - phpStudy
haodewap.net

我要回帖

更多关于 js首屏加载 的文章

 

随机推荐