2

这是插件，以防有人发现它有用。http://silvestreh.github.io/onScreen/
再次感谢！

所以，我正在尝试编写我的第一个 jQuery 插件，但我已经找到了我的第一个障碍。该插件应该在元素可见时对元素执行某些操作（如在视口区域中，而不是 CSS 可见性）

这是插件的样子：

(function($) {
  $.fn.onScreen = function(options) {
    var self = $(this);

    params = $.extend({
      doIn: function(){
        console.log('on screen');
      },
      doOut: function(){
        console.log('off screen');
      },
      offset: 0
    }, options);

    return this.each(function() {
      var $el = $(this);
      var elTop = $el.offset().top;

      $(window).scroll(function() {
        var pos = $(window).scrollTop();

        if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
          params.doIn.call($el[0]);
        } else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
          if (typeof(params.doOut) == 'function') {
            params.doOut.call($el[0]);
          }
        }
      });
    });
  };
})(jQuery);

这就是我尝试使用它的方式：

$(function(){
  $('div').onScreen({
    doIn: function() {
      $(this).stop().animate({
        left: 20
      },500)
    },
    doOut: function() {
      $(this).stop().animate({
        left: 0
      },500)
    }
  });
});

问题是$(this)指的是窗口对象（因为$(window).scroll()插件中的）而不是匹配的元素。我究竟做错了什么？如何告诉我的插件我想对匹配的元素做一些事情？

提前致谢 ：-）

编辑：我刚刚创建了一个 JSFiddle，因此您可以查看它。http://jsfiddle.net/FBEFJ/3/ 编辑 2：bfavaretto 修复了代码。我用工作代码更新了问题。谢谢！

4

1 回答 1

1

问题是你如何在插件中调用 doIn 和 doOut 。也许最简单的解决方案是使用 强制执行this值Function.prototype.call：

if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
    params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
    if (typeof(params.doOut) == 'function') {
        params.doOut.call($el[0]);
    }
}
于 2013-10-18T23:48:00.437 回答