当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Scrollify.js的使用与demo展示（实例）

Scrollify.js的使用与demo展示（实例）

2019年05月18日  | 移动技术网IT编程  | 我要评论

和 fullpage.js 一样，scrollify 也是一款基于 jquery 的全屏滚动插件。跟 fullpage.js 相比，scrollify 更加小巧，压缩后不足 4kb。但功能上不如 fullpage.js 强大，对移动设备的支持也不如 fullpage.js。不过对于一般的情况，scrollify 是完全可以胜任的，它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullpage.js 没有的局部滚动。

代码：

<!doctype html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
    <title>h5分屏显示</title>  
    <!-- html5shiv.js解决html5提出的新的元素不被ie6-8识别 -->  
    <!--[if lt ie 9]>  
    <script src="js/html5shiv.min.js"></script>  
    <![endif]-->  
    <link rel="stylesheet" href="css/style.css">  
</head>  
  
<body>  
    <p class="body-all">  
        <!-- data-section-name为滑动结点值 -->  
        <section class="panel home" data-section-name="home">  
            <!-- 添加背景图片，设置图片模糊 -->  
            <p class="panel_bgphoto panel_bgphoto_1"></p>  
            <p class="panel_box">  
                <p class="panel_box_down">  
                    <a href="#overview" class="scroll"></a>  
                </p>  
            </p>  
        </section>  
        <section class="panel overview" data-section-name="overview">  
            <p class="panel_bgphoto panel_bgphoto_2"></p>         
        </section>  
        <section class="panel configuration" data-section-name="configuration">  
            <p class="panel_bgphoto panel_bgphoto_3"></p>  
        </section>  
        <section class="panel options" data-section-name="options">  
            <p class="panel_bgphoto panel_bgphoto_4"></p>  
        </section>  
        <section class="panel methods" data-section-name="methods">  
            <p class="panel_bgphoto panel_bgphoto_5"></p>  
            <p class="panel_box">  
                <p class="panel_box_down">  
                    <a href="#home" class="scroll2"></a>  
                </p>  
            </p>  
        </section>  
    </p>  
    <script type="text/javascript" src="js/jquery.min.js"></script>  
    <!-- 全屏滑动必需js开始 -->  
    <script src="js/jquery.easing.min.js"></script>  
    <script src="js/jquery.scrollify.min.js"></script>  
    <!-- 全屏滑动必需js结束 -->  
    <script>  
    $(function() {  
          
        // 设置panel高度为浏览器窗口的高度  
        $(".panel").css({"height":$(window).height()});  
          
        // 设置panel_bgphoto高度为浏览器窗口的高度  
        $(".panel_bgphoto").css({"height":$(window).height()});  
          
        // 设置panel_bgblack高度为浏览器窗口的高度  
        $(".panel_bgblack").css({"height":$(window).height()});  
  
        // 设置panel_box高度为浏览器窗口的高度  
        $(".panel_box").css({"height":$(window).height()});  
  
        var timer;  
  
        $(window).resize(function() {  
            cleartimeout(timer);  
            timer = settimeout(function() {  
                $(".panel").css({"height":$(window).height()});  
            },40);  
        });  
  
        // 设置scrollify插件的选项  
        $.scrollify({  
            section:".panel",  
            scrollbars: false  
        });  
          
        // 设置点击scroll返回该href地点  
        $(".scroll").click(function(e) {  
            e.preventdefault();  
            $.scrollify("move",$(this).attr("href"));  
        });  
  
        // 设置点击scroll2返回该href地点  
        $(".scroll2").click(function(f) {  
            f.preventdefault();  
            $.scrollify("move",$(this).attr("href"));  
        });  
    });  
    </script>  
</body>  
</html>
/*-----------------------------自定义样式-----------------------------*/
.body-all{
	position:relative;
	text-align: center;/*重要*/
}
.panel {
	widows: 100%;
	/*height: ;*/ 
	/*该标签的高度已经用jquery确定为浏览器的高度：$(".panel").css({"height":$(window).height()});*/
	z-index: 1;
}
/*第一屏*/
.home {
	/*background:hsl(184,65%,49%);*/
}
/*第一屏*/

/*第二屏*/
.overview {
	/*background:hsl(150,65%,49%);*/

}
/*第二屏*/

/*第三屏*/
.configuration {
	/*background:hsl(100,65%,49%);*/
}
/*第三屏*/

/*第四屏*/
.options {
	/*background:hsl(58,65%,49%);*/
}
/*第四屏*/

/*第五屏*/
.methods {
	/*background:hsl(10,60%,55%);*/
}
/*第五屏*/

.panel_bgphoto{/*背景图片模糊*/
	width: 100%;
	/*height: ;*/
	/*该标签的高度已经用jquery确定为浏览器的高度：$(".panel_bgphoto").css({"height":$(window).height()});*/
	/*float: left;*/
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: url(blur.svg#blur); /* firefox, chrome, opera */
    -webkit-filter: blur(3px); /* chrome, opera */
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);    
    filter: blur(3px);
    filter: progid:dximagetransform.microsoft.blur(pixelradius=5, makeshadow=false); /* ie6~ie9 */
    transition-delay:1s;
    position:absolute;
    z-index: 2;
}
.panel_bgphoto_1{
	background-image: url(../img/i1.png);
}
.panel_bgphoto_2{
	background-image: url(../img/i2.png);
}
.panel_bgphoto_3{
	background-image: url(../img/i3.jpg);
} 
.panel_bgphoto_4{
	background-image: url(../img/i4.jpg);
}
.panel_bgphoto_5{
	background-image: url(../img/i5.jpg);
}
.panel_bgblack{/*黑色透明遮罩*/
	width: 100%;
	/*height: ;*/
	/*该标签的高度已经用jquery确定为浏览器的高度：$(".panel_bgblack").css({"height":$(window).height()});*/
	background-color: #000;
	opacity: 0.6;
	position: absolute;
	z-index: 3;
}

.panel_box{
	width: 100%;
	/*height: ;*/
	/*该标签的高度已经用jquery确定为浏览器的高度：$(".panel_box").css({"height":$(window).height()});*/
	background-color: rgba(39,39,39,.5);
	position: relative;
	z-index: 8;
}
.panel_box_down{
	width: 100%;
	height: 100px;
	bottom: 5%;
	position: absolute;
	/*background-color: #999;*/
	z-index: 9;
}
/*-----------------------------自定义样式-----------------------------*/

效果：

\

配置：

$(function() {
    $('.panel').css({'height': $(window).height()});
    $.scrollify({
        section: '.panel'
    });
});
属性/方法 类型 默认值 说明
section 字符串 section 滚动元素的选择器
sectionname 字符串 section-name 自定义锚链接，需要通过 html data 属性 data-section-name 指定，如 data-section-name=”home”
easing 字符串 easeoutexpo 过度效果
scrollspeed 整数 1100 过度/滚动时间，以毫秒为单位
offset 整数 0 偏移，
scrollbars 布尔值 true 是否显示滚动条
before 函数 控制 滚动前的回调函数
after 函数 控制 滚动后的回调函数

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网