jQuery全屏滚动插件 Fullpage.js 及 move.js

最新推荐文章于 2024-08-13 08:24:54 发布

布鲁斯基

最新推荐文章于 2024-08-13 08:24:54 发布

阅读量1.9k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Fullpage.js

引入文件

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

HTML结构

<div id="fullpage">
	<div class="section">第一屏</div>
	<div class="section">第二屏</div>
	<div class="section active">  <!--active表示页面打开时，默认就跳转到某一屏-->
		<div class="slide">第三屏的幻灯片第1屏</div>
		<div class="slide">第三屏的幻灯片第2屏</div>
		<div class="slide">第三屏的幻灯片第3屏</div>
		<div class="slide">第三屏的幻灯片第4屏</div>
	</div>
	<div class="section">第四屏</div>
</div>

JavaScript

//最简化
$(function(){
	$("#fullpage").fullpage();
});

//经测试，至少需要一个参数，否则火狐第一次滚动会直接滚到底部。
$(function(){
    $('#fullpage').fullpage({
	    fixedElements: ['#header'],
	    sectionsColor: ['#254875', '#00FF00', '#254587', '#695684'],
	    anchors: ['page1', 'page2', 'page3', 'page4'],
	    navigation: true,
	    navigationTooltips: ['fullPage', 'Powerful', 'Amazing', 'Simple']
    })
})

常用参数

选项	默认值	说明
secionsColor	`[C1,C2,C3,C4…]`	每屏的背景色
anchors	`[P1,P2,P3,P4…]`	每屏的自定义锚点名称，在地址栏中显示，不需要加#，不要和页面中的ID或Name重名
fixedElements	`#ID`	元素 position:fixed 固定注意元素本身还需要设置 css position:fixed，这里如果不声明’#ID’，就算元素是 fixed 也不会显示
navigation	`false`	是否显示导航小圆点
navigationPosition	`'right'`	导航小圆点的位置，可选’left’
navigationColor	`#000`	导航小圆点的颜色
navigationTooltips	`[T1,T2,T3,T4…]`	hover小圆点的提示信息
showActiveTooltip	`false`	是否不用hover触发，就自动显示当前小圆点导航的提示信息

其他参数

选项	默认值	说明
verticalCentered	true	内容是否垂直居中
resize	false	页面字体是否随着窗口缩放而缩放
scrollingSpeed	700	滚动速度，单位为毫秒
lockAnchors	false	地址栏中锚链接不显示
animateAnchor	true	锚链接是否含有滚动效果，如果false，则变成普通的瞬移到#锚点
recordHistory	true	记录滚屏历史，可以通过浏览器的前进和后退导航到相应的锚点
easing	easeInQuart	滚动动画方式，需要jquery.easings插件
css3	true	是否使用css3 transforms来实现滚动效果，false或浏览器不支持css3，则使用jquery代替
loopBottom	false	滚动到最后一屏时，跳转到第一屏
loopTop	false	滚动到第一屏时，跳转到最后一屏
continuousVertical	false	是否循环滚动，与 loopTop 及 loopBottom 不兼容
autoScrolling	true	false：不再按屏滚动，浏览器自带滚动条出现，恢复默认滚动
scrollBar	false	true：不再按屏滚动，浏览器自带滚动条出现，无法滚轮滚动
scrollOverflow	false	当内容超过满屏时，是否显示滚动条。如果设置为true，则显示滚动条，但此时的内部滚动条，不能滚动，因为一滚会切换到下一屏，所以还需要jquery.slimscroll插件配合，才能模拟传统的浏览器滚动条效果。页面引入：`<script src="js/jquery-slimscroll.js"></script>`
controlArrow	true	幻灯片slide的箭头显示或隐藏
controlArrowColor	#fff	幻灯片slide的箭头背景色
loopHorizontal	true	幻灯片slide，播放到最后一张时，跳转到第一张
paddingTop paddingBottom	0	顶部底部padding值
keyboardScrolling	true	是否支持键盘方向键切换屏幕
slidesNavigation	false	是否显示幻灯片的导航小圆点
slidesNavPosition	bottom	导航小圆点的位置，可选’top’
sectionSelector	.section	section的选择元素
slideSelector	.slide	slide的选择元素
menu	false	和fixedElements类似

<ul id="fullpagemenu" style="position:fixed; top:0; z-index:9999">
	<li><a href="#page1">1 section</a></li>
	<li><a href="#page2">2 section</a></li>
	<li><a href="#page3">3 section</a></li>
	<li><a href="#page4">4 section</a></li>
</ul>

<script>
$("#fullpage").fullpage({
	menu:"#fullpagemenu"
});
</script>

方法

名称	说明
moveSectionUp()	向上滚动一屏
moveSectionDown()	向下滚动一屏
moveTo(section, slide)	滚动到第几屏的第几个幻灯片，注意页面从1开始，幻灯片从0开始
silentMoveTo(section,slide)	和moveTo一样，但没有滚动效果
moveSlideRight()	幻灯片向右滚动
moveSlideLeft()	幻灯片向左滚动
setAutoScrolling(boolean)	动态设置autoScrolling
setLockAnchors(boolean)	动态设置lockAnchors
setRecordHistory(boolean)	动态设置RecordHistory
setScrollingSpeed(ms)	动态设置ScrollingSpeed
setKeyboardScrolling(boolean)	动态设置setKeyboardScrolling
setAllowScrolling(boolean,[directions])	禁用或启用鼠标滚轮的滑动控制 true为启用，false为禁用，directions为方向，取值包含all, up, down, left, right, 可以使用多个，逗号分隔。实际应用：有奖问答页面
destory(type)	销毁fullpage特效，type可以不写，或者使用all。 - destory() 依靠fullpage触发的滚屏和幻灯片脚本失效 - destory(“all”) 样式、html等全部销毁，页面恢复到不使用fullpage前的原始效果。
reBuild()	重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果

回调函数

afterLoad(anchorLink,index)

滚动到某一个section，且滚动结束后触发。
函数接收anchorLink锚链接的名称，和index序号(从1开始)两个参数。
我们可以根据anchorLink和index参数判断，触发相应的事件。

$("#fullpage").fullpage({
	afterLoad:function(anchorLink,index){
	console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
}
});

onLeave(index,nextIndex,direction)

在离开一个section时，会触发一次。
接收index、nextIndex和direction三个参数。

index: 离开section的序号，从1开始计算
nextIndex: 滚动到的目标section的序号，从1开始计算
direction: 判断网上滚动还是往下滚动，值up或down

通过return false; 可以取消滚动。
onLeave总是在afterLoad之前触发。

$("#fullpage").fullpage({
	afterLoad:function(anchorLink,index){
	console.log("afterLoad: anchorLink="+anchorLink+"; index="+index);
}
onLeave:function(index,nextIndex,direction){
	console.log("onLeave: index="+index+"; nextIndex="+nextIndex+"; direction="+direction);
}
});

afterRender()

页面结构渲染完成后触发，或解释为在第一个section afterLoad之后，触发

afterResize()

浏览器窗口尺寸改变后触发

$("#fullpage").fullpage({
	afterRender:function(){
	console.log("afterRender");
}
afterResize:function(){
	console.log("afterResize");
}
})

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)

滚动到某一幻灯片后触发，与afterLoad类似。
接收 anchorLink、index、slideIndex、direction 四个参数。

onSlideLeave(anchorLink,index,slideInex,direction,nextSlideIndex)

在离开一个幻灯片时触发，与onLeave类似。
接收 anchorLink、index、slideIndex、direction 四个参数。

fullpage还可以延时加载图片或媒体

图片：

<img data-src="image.png">

媒体：

<video>
<source data-src="view.mp4" type="video/mp4">
<source data-src="view.webm" type="video/webm">
</video>

下载： https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

Move.js

CSS3

.box {
	transition:margin 1s;
}
.box:hover {
	margin-left:100px;
}

使用move.js达到相同效果

move('.box')
.set('margin-left',100)
.end();

下载 http://visionmedia.github.io/move.js/

方法

set(prop, val)

设定属性

//.box margin-left=200
move('.box')
  .set('margin-left', 200)
  .end();

add(prop, val)

追加属性

//.box margin-left+=200
move('#.box')
  .add('margin-left', 200)
  .end();

sub(prop, val)

追减属性

//.box margin-left-=100
move('.box')
  .sub('margin-left', 100)
  .end();

rotate(deg)

旋转

move('.box')
  .rotate(140)
  .end();

translate(x[, y])

位移

move('.box')
  .translate(300, 80)
  .end();

x(n) / #y(n)

单坐标位移

move('.box')
  .x(300)
  .y(20)
  .end();

skew(x[, y])

倾斜

move('.box')
  .x(300)
  .skew(50)
  .set('height', 20)
  .end();

scale(x[, y])

缩放，单轴缩放：#scaleX(n) Move#scaleY(n)

move('.box')
  .scale(3)
  .end();

ease(fn)

动画缓动类型

move('.box1').x(400).end();
move('.box2').ease('in').x(400).end();
move('.box3').ease('out').x(400).end();
move('.box4').ease('in-out').x(400).end();
move('.box5').ease('snap').x(400).end();
move('.box6').ease('cubic-bezier(0,1,1,0)').x(400).end();

end([fn])

回调函数

move('.box')
  .set('background-color', 'red')
  .duration(1000)
  .end(function(){
    move('.box')
      .set('background-color', 'white')
      .end();
  });

delay(n)

延时

move('.box')
  .set('background-color', 'blue')
  .delay('2s')
  .end();

then([fn])

然后运行

//先红框滚到x500，之后变白框滚回x0
var moveBack = move('#example-13 .box')
  .set('background-color', 'white')
  .x(0);

move('#example-13 .box')
  .set('background-color', 'red')
  .x(500)
  .then(moveBack)
  .end();

//先红框，滚x500，缩小到一半，旋转60度；然后，再旋转30度，放大到1.5倍，圆角5，背景白色；再后透明度0
//注意这里的then需要和pop搭配，一个then()开头 + 一个pop()结尾
move('#example-13 .box2')
  .set('background-color', 'red')
  .x(500)
  .scale(.5)
  .rotate(60)
    .then()
      .rotate(30)
      .scale(1.5)
      .set('border-radius', 5)
      .set('background-color', 'white')
      .then()
        .set('opacity', 0)
        .pop()
      .pop()
  .end();

Fullpage.js实例1

案例效果： http://www.dowebok.com/demo/2014/78/#page1

HTML

<div class="section">
    <div class="science-inner inner">
        <a class="itemshow stiteml st1" href="javascript:void(0)">网络机顶盒</a>
        <a class="itemshow stiteml st2" href="javascript:void(0)">干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="javascript:void(0)">3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="javascript:void(0)">H7N9</a>
        <a class="stimg1" href="javascript:void(0)">
            <img width="181" height="166" src="images/h7n9.jpg">
        </a>
    </div>
</div>

在热词和图片中加一个 rel 属性，里面放4个数值，用逗号隔开，这4个数值的作用是用于定位，前两个是默认的位置，后两个是出现后的位置。添加之后代码如下：

<div class="section">
    <div class="science-inner inner">
        <a class="itemshow stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
        <a class="itemshow stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
        <a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153">
            <img width="181" height="166" src="images/h7n9.jpg">
        </a>
    </div>
</div>

CSS

CSS 主要是热词旁边“1月、2月”背景图片的定位，如：

.science-inner .st1 {
    background-position: 0 4px
}
.science-inner .st2 {
    background-position: 0 -59px
}
.science-inner .st3 {
    background-position: 0 -59px
}
.science-inner .st4 {
    font-size: 48px;
    background-position: 0 -104px
}

JavaScript

首先设置一些基本的效果，比如背景颜色、锚链接、绑定菜单等等；

$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        menu: '#menu'
    });
});

初始化后的回调函数，或者笼统的说是页面加载后的回调函数，本例是“史记”两个字的动画效果；

afterRender: function(){
    $('.screen-main span').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[2] + 'px',
            top: $arr[3] + 'px'
        }, 500);
    });
    $('.inner a').each(function(){
        var $rel = $(this).attr('rel');
        var $arr = $rel.split(',');
        $(this).animate({
            left: $arr[0] + 'px',
            top: $arr[1] + 'px'
        }, 500);
    });
}

滚动前后的回调函数，本例是热词很多图片的动画效果；

afterLoad: function(anchorLink, index){
    if(index == 1){
        $('.screen-main span').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[2] + 'px',
                top: $arr[3] + 'px'
            }, 500);
        });
    }
    if(index == 2 || index == 3 || index == 4 || index == 5){
        $('.inner').eq(index - 2).find('a').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[2] + 'px',
                top: $arr[3] + 'px'
            }, 500);
        });
    }
    if(index == 6){
        $('.zanzhu-con a').fadeIn(1000);
    }
},
onLeave: function(index, direction){
    if(index == 1){
        $('.screen-main span').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[0] + 'px',
                top: $arr[1] + 'px'
            }, 500);
        });
    }
    if(index == 2 || index == 3 || index == 4 || index == 5){
        $('.inner').eq(index - 2).find('a').each(function(){
            var $rel = $(this).attr('rel');
            var $arr = $rel.split(',');
            $(this).animate({
                left: $arr[0] + 'px',
                top: $arr[1] + 'px'
            }, 500);
        });
    }
    if(index == 6){
        $('.zanzhu-con a').fadeOut(1000);
    }
}

到这就完成了，大家还可以举一反三，编写出其他动画效果以及应用到其他地方。

案例下载： https://dowebok.ctfile.com/fs/1603944-203833403

实例2：制作网易邮箱6.0介绍页

案例效果： http://www.dowebok.com/demo/2014/97/#page1

html

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

<!--由于 HTML 代码较多，就不全部贴上来，这里只贴“第一屏”的代码，如下：-->
<div class="section section1">
    <div class="bg"><img src="images/section1.jpg" alt=""></div>
    <div class="bg11"></div>
    <div class="bg12"></div>
    <div class="bg13"></div>
    <div class="mail">
        <a class="mail-163" href="http://www.dowebok.com/">163邮箱</a>
        <a class="mail-126" href="http://www.dowebok.com/">126邮箱</a>
        <a class="mail-yeah" href="http://www.dowebok.com/">yeah邮箱</a>
    </div>
    <div class="hgroup">
        <h1><a href="http://www.dowebok.com/">网易邮箱6.0</a></h1>
        <h2>改变，不止所见。</h2>
    </div>
    <p class="p11">网易邮箱6.0版&mdash;&mdash;2014年最具创意气质的重量级新邮箱，重生光华，为之瞩目。唯美<br>
        的视觉设计和视觉化交互，无可替代的独创动态情景皮肤，多项国内创意产品专利技术，<br>
        成就无与伦比的出众品味，无可比拟的美妙体验。</p>
</div>

为了兼容 IE 低版本，“大背景”使用的是 img 方式（section1.jpg），并在 CSS 中设置 img 宽度和高度 100%，以填满整个屏幕。

JavaScript

$(function(){
    if($.browser.msie && $.browser.version < 10){
        $('body').addClass('ltie10');
    }
    $.fn.fullpage({
        verticalCentered: false,
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8', 'page9', 'page10'],
        navigation: true,
        navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
    });
});

如果 IE 版本低于 10，就给 body 加上一个 ltie10 类。这个类的主要作用是解决低版本 IE 在滚动时，背景图片立刻隐藏的问题。

案例下载： https://dowebok.ctfile.com/fs/1603944-215625314

类似 fullpage 的全屏滚动插件 jsModern

案例演示： http://www.jq22.com/yanshi16607
意义：可以横向滚动。

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

<body>
    <section>
        <div>第一页</div>
        <div>第二页</div>
        <div>第三页</div>
        <div>第四页</div>
    </section>
    <script>
        jsModern.fullPage({
        navigation: true,
        background: ['#6E459B', '#4BBFC3', '#C94646', '#f90'],
        axis: "x",
        callback: [
                function () {   // 区块一内的动画   },    
                function () {   // 区块二内的动画   },    
                function () {   // 区块三内的动画   },    
                function () {   // 区块四内的动画   },          
        ]
        });
    </script>
</body>

下载： http://www.jq22.com/jquery-info16607