jquery整屏滚动插件Scrollify

所属分类:UI-滚动

 106176  589  查看评论 (25)
分享到微信朋友圈
X
jquery整屏滚动插件Scrollify ie兼容8

基本设置

Scrollify需要jQuery 1.6 +和jquery.easing.js。

最基本的设置如下:

<! doctype html>
    <html>
        <head>
            <script>
                $(function() {
                    $.scrollify({
                        section : "section",
                    });
                });
            </script>
        </head>
        <body>
            <section></section>
            <section></section>
        </body>
</html>


配置

这是默认配置:

$.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {}
});


选项

section 选择器部分。

sectionName Scrollify允许您定义一个散列值为每个部分。这使得它可以永久链接到特定的部分。这是作为一个数据集属性部分。定义的数据属性的名称

easing 定义easing的方法

offset 抵消每个部分位置的像素。

scrollbars 一个布尔值来定义是否滚动条是否可见的。


===========以下内容由 一点钟方向3218710903提供==========

参数说明

section : "section",  //section选择器,绑定需要滚动的对象。

sectionName : "section-name",  //哈希值,用于区另于其它section

 easing: "easeOutExpo",  //easing的动画方法

scrollSpeed: 1100, //滚动的速度

 offset : 0,    // 抵消每个部分位置的像素

scrollbars: true, //定义是否滚动条是否可见的

before:function() {}, //动画前触发的函数

after:function() {}   //动画后触发的函数

相关插件-滚动

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 57997  512

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 31834  357

滚动条

可定制的滚动条,通过js+css实现
  滚动
 53245  335

常用的根据高度自动切换效果

常用的根据高度自动切换效果 简单 下载下来之后可以直接是用 兼容性好 不存在兼容问题
  滚动
 28153  344

讨论这个项目(25)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Lenci 0
    2021/5/4 13:52:55
    页面上加链接就不好用了,总是点下就滑到下一页 回复
    我可以 0
    2020/1/9 11:25:13
    axdtao 0
    2018/3/28 14:41:36
    还有这种操作? 0
    2018/1/5 17:02:26

    移动端还是不太兼容

    回复
    /mn★怡琳★ 0
    2017/12/25 16:38:45
    38.6°℃ 0
    2017/7/6 15:02:40

    为什么我的整屏下面会有一点空白  不能铺满全屏

    回复
    东岛长离 0
    2017/6/12 14:20:23
    YG。 0
    2017/1/13 14:01:05
    可以定义焦点吗? 回复
    魂之挽歌。 0
    2017/1/6 14:01:06
    滑动一下滚动两次的bug你们都没发现吗?你们那里浏览的时候没出现这个问题? 回复
    莉娜 哦! 0
    2016/12/25 15:12:38

    下载不了怎么办

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复