1

我正在尝试使用 jquery 工具提示插件来扩展一些图像缩略图，并在有人将鼠标悬停在缩略图上时显示完整大小的图像。然而，这是非常跳跃的，即使鼠标保持静止，工具提示也会在固定在一个地方之前跳跃大约 2-3 次。

这是为什么？有没有办法解决它？

html代码：

<ul class="gallery" id="gallery">
    <li>
            <img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" />
    </li>
</ul>

Javascript：

$(".galleryImg").tooltip({
            delay: 0,
            showURL: false,
            bodyHandler: function() {
                return $("<img/>").attr("src", this.src)
                    .attr('width', 300).attr('height', 300);
            }
        });
4

4 回答 4

3

我在 jquery 论坛上找到了解决方案。只需像这样删除显示和隐藏效果：

jQuery('#myelement').tooltip({
    show: false,
    hide: false
});
于 2013-04-24T23:40:07.580 回答
1

我使用过相同的 jQuery 插件，但它给我带来了一些问题，即同一页面上的大量元素。在测试了一些之后，我选择了这个：

你可以在这里看到一个工作 演示！

和网页链接 在这里！

已编辑

根据评论的要求，这里有一个基于上述插件的 jQuery 扩展：

查询

(function($) {
  $.fn.tooltipImg = function(options) {

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

    // when the mouse gets over the element
    $(this).hover(function(e){

      this.t = this.alt;

      var c   = (this.t != "") ? "<br/>" + this.t : "",
          src = ($(this).data("src")!='') ? $(this).data("src") : this.src,
          res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>';

      $("body").append(res);

      $("."+opts.wrapper)
        .css({
          "top"  : (e.pageY - opts.xOffset) + "px",
          "left" : (e.pageX + opts.yOffset) + "px"
        })
        .fadeIn("fast");                      
      },
      function(){
        $("."+opts.wrapper).remove();
      });

      // when the mouse moves while over the element
      $(this).mousemove(function(e){
        $("."+opts.wrapper)
          .css({
            "top"  : (e.pageY - opts.xOffset) + "px",
            "left" : (e.pageX + opts.yOffset) + "px"
          });
      });

  }

  // options defaults
  $.fn.tooltipImg.defaults = {
    xOffset : 10,
    yOffset : 30,
    wrapper : 'myTooltipImgWindow'
  }

})(jQuery);

用法

$(document).ready(function(){
  $('.tooltipMe').tooltipImg();

  // with options
  $('.tooltipMe').tooltipImg({
    xOffset : 20,
    yOffset : 40,
    wrapper : 'myToolTipContainerClass'
  });
});

你可以看到这个工作的小提琴！

这个小提琴说明了来自跨域的图像，具有相对路径和来自img src.

请注意，Fiddle 下的相对路径是错误的，有时您会看到它，有时您不会，但它工作得很好！

于 2012-05-16T02:52:40.390 回答
0

我以前看到过这种情况——这就是为什么我搜索了一个更灵活、易于使用且易于集成的工具提示。我通过 Listly 找到了一个很棒的工具 - 查看 WalkMe.com。我想你会发现结果非常令人满意。让我知道图像是如何工作的。

于 2012-05-16T11:31:26.023 回答
0

在编写自己的简单工具提示时，我发现当我将工具提示附加到非正文元素时。在 IE7、IE8 和 IE9 中隐藏/显示工具提示之间会出现跳动或紧张。

例如，我有$('li').append(toolTip html..)导致工具提示的紧张或跳跃隐藏/显示。在 firefox、Chrome 和 Safari 中不紧张或紧张。在 IE7、IE8 和 IE9 中不好。

当我切换到 时$('body').append(toolTip html..)，它会按预期在 IE 7、IE8 和 IE9 中显示，并且在 Firefox、Chrome 和 Safari 中仍然可以正常工作。

于 2012-09-14T14:04:58.803 回答