欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-16 11:30:57
和 fullpage.js 一样，scrollify 也是一款基于 jquery 的全屏滚动插件。跟 fullpage.js 相比，scrollify 更加小巧，压缩后不足 4kb...

和 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;
}
/*-----------------------------自定义样式-----------------------------*/

效果：

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

配置：

$(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 函数 控制 滚动后的回调函数

上一篇： 华硕ROG战刃2标准版游戏鼠标怎么样 华硕ROG战刃2标准版游戏鼠标评测

下一篇： Lofree洛菲DOT蓝牙机械键盘怎么样?

推荐阅读