1

jquery ツールチップ プラグインを使用して画像のサムネイルを展開し、誰かがサムネイルにカーソルを合わせるとフル サイズの画像を表示しようとしています。ただし、これは非常に不安定です。マウスが静止していても、ツールチップは 2 ～ 3 回ジャンプしてから 1 か所に固定されます。

何故ですか？それを修正する方法はありますか？

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 拡張機能があります。

Jクエリ

(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'
  });
});

この動作する Fiddle を見ることができます!

この Fiddle は、クロスドメインからの画像、相対パスを使用した画像、およびimg src.

Fiddle の下の相対パスにはバグがあることに注意してください。表示される場合と表示されない場合がありますが、問題なく動作します。

于 2012-05-16T02:52:40.390 に答える
0

独自の単純なツールチップを作成する際に、ツールチップを本体以外の要素に追加したときに、そのことがわかりました。IE7、IE8、および IE9 では、toolTip の非表示/表示の間でビクビクまたはジクザクしていました。

たとえば、$('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 に答える
0

これは以前にも見たことがあります。そのため、より柔軟で使いやすく、簡単に統合できるツールチップを探しました。Listly で素晴らしいツールを見つけました。WalkMe.com をチェックしてください。とても満足のいく結果が得られると思います。画像の出来上がりを教えてください。

于 2012-05-16T11:31:26.023 に答える