0

我正在使用 hoverpulse 插件在鼠标悬停时放大我网页上的图像。一切似乎都很好，除了 Firefox 中的一个问题。当我在 Firefox 上运行该页面时，我的图像会在我加载页面后立即弹出到左上角。我不知道为什么会这样。下面是插件JS

(function($) {

$.fn.hoverpulse = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
    if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).hoverpulse(options);
            });
        }
        return this;
    }
    var opts = $.extend({}, $.fn.hoverpulse.defaults, options);

    // if not modified size_y is same as size
    opts.size_y = opts.size_y || opts.size;
    // parent must be relatively positioned
    this.parent().css({ position: 'relative' });
    // pulsing element must be absolutely positioned
    this.css({ position: 'absolute', top: 0, left: 0 });

    this.each(function() {
        var $this = $(this);
        var w = $this.width(), h = $this.height();
        $this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
    });
    // bind hover event for behavior
    return this.hover(
        // hover over
        function() {
            var $this = $(this);
            $this.parent().css('z-index', opts.zIndexActive);

            var size = $this.data('hoverpulse.size');
            var w = size.w, h = size.h;
            $this.stop().animate({
                top:  ('-'+opts.size_y+'px'),
                left: ('-'+opts.size+'px'),
                height: (h+2*opts.size_y)+'px',
                width:  (w+2*opts.size)+'px'
            }, opts.speed, opts.over);
        },
        // hover out
        function() {
            var $this = $(this);
            var size = $this.data('hoverpulse.size');
            var w = size.w, h = size.h;

            $this.stop().animate({
                top:  0,
                left: 0,
                height: (h+'px'),
                width:  (w+'px')
            }, opts.speed, function() {
                $this.parent().css('z-index', opts.zIndexNormal);
                opts.out.call(this);
            });
        }
    );
};

$.fn.hoverpulse.defaults = {
    size:  20,
    size_y: 0,
    speed: 200,
    zIndexActive: 100,
    zIndexNormal: 1,
    over: $.noop || function() {},
    out: $.noop || function() {}
};

})(jQuery);

在我的 html 页面上 -

$(document).ready(function() {
    $('.hoverImage').hoverpulse().each(function() {
        var $img = $(this);
        var link = $img.attr('data-link');
        $img.attr('title','Click to open in a new window');
        $img.click(function() {
            window.open(link);
            return false;
        });
    });
});
<img class="hoverImage" src="\p1.jpg" height="10px" width="10px" data-link="\p1.jpg"/>

有人可以告诉我这里有什么问题吗？

4

1 回答 1

0

我相当确定这是由于 jQuery .animate()API 的重大变化。Hoverpulse 使用'+42px'样式值而不是'+=42px'样式设置动画。试试这个插件的补丁版本：

/*
 * jQuery HoverPulse Plugin by M. Alsup
 * Examples and docs at: http://malsup.com/jquery/hoverpulse/
 * Dual licensed under the MIT and GPL
 * Requires: jQuery v1.2.6 or later
 * @version: 1.01  26-FEB-2009
 *
 * Patched to work with jQuery 1.10
 */
(function($) {

$.fn.hoverpulse = function(options) {
    // in 1.3+ we can fix mistakes with the ready state
    if (this.length == 0) {
        if (!$.isReady && this.selector) {
            var s = this.selector, c = this.context;
            $(function() {
                $(s,c).hoverpulse(options);
            });
        }
        return this;
    }    

  var opts = $.extend({}, $.fn.hoverpulse.defaults, options);

  // parent must be relatively positioned
  this.parent().css({ position: 'relative' });
  // pulsing element must be absolutely positioned
  this.css({ position: 'absolute', top: 0, left: 0 });

  this.each(function() {
    var $this = $(this);
    var w = $this.width(), h = $this.height();
    $this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
  });

  // bind hover event for behavior
  return this.hover(
    // hover over
    function() {
      var $this = $(this);
      $this.parent().css('z-index', opts.zIndexActive);

      var size = $this.data('hoverpulse.size');
      var w = size.w, h = size.h;
      $this.stop().animate({ 
        top:  ('-='+opts.size+'px'), 
        left: ('-='+opts.size+'px'), 
        height: (h+2*opts.size)+'px', 
        width:  (w+2*opts.size)+'px' 
      }, opts.speed);
    },
    // hover out
    function() {
      var $this = $(this);
      var size = $this.data('hoverpulse.size');
      var w = size.w, h = size.h;

      $this.stop().animate({ 
        top:  0, 
        left: 0, 
        height: (h+'px'), 
        width:  (w+'px') 
      }, opts.speed, function() {
        $this.parent().css('z-index', opts.zIndexNormal);
      });
    }
  );
};

$.fn.hoverpulse.defaults = {
  size:  20,
  speed: 200,
  zIndexActive: 100,
  zIndexNormal: 1
};

})(jQuery);
于 2013-11-24T21:44:21.213 回答