返回介绍

滚动显示

发布于 2020-02-15 17:34:05 字数 1764 浏览 881 评论 0 收藏 0

滚动显示是一个 JQuery 插件,根据滚动的距离来执行回调函数。我们将展示很多的示例来告诉你怎么使用。

jQuery 插件初始化

var options = [
    {selector: '.class', offset: 200, callback: customCallbackFunc } },
    {selector: '.other-class', offset: 200, callback: function() {
customCallbackFunc();
    } },
  ];
Materialize.scrollFire(options);

jQuery 插件选项

选项名称描述
Selector追踪元素的选择器。
Offset如果这是 0,当选择器的元素到达用户的窗口时这个回调被触发。
Callback执行一个回调函数当用户滚动到指定位置时。仅执行一次。
这个回调函数提供一个参数,这个参数关联到当前选择的元素。

滚动显示示例

慢慢的滚动,你会知道滚动显示能为你做什么。这个滚动显示的代码我们在这里使用的代码。

var options = [ {selector: '#staggered-test', offset: 50, callback: function(el) {
Materialize.toast("This is our ScrollFire Demo!", 1500 );
    } }, {selector: '#staggered-test', offset: 205, callback: function(el) {
Materialize.toast("Please continue scrolling!", 1500 );
    } }, {selector: '#staggered-test', offset: 400, callback: function(el) {
Materialize.showStaggeredList($(el));
    } }, {selector: '#image-test', offset: 500, callback: function(el) {
Materialize.fadeInImage($(el));
    } } ]; Materialize.scrollFire(options);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文