我正在尝试使用 jquery 工具提示插件来扩展一些图像缩略图,并在有人将鼠标悬停在缩略图上时显示全尺寸图像。然而,这是非常跳跃的,即使鼠标保持静止,工具提示也会跳动 2-3 次,然后固定在一个地方。
为什么?有没有办法解决它?
网页代码:
<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);
}
});
我在jquery论坛上找到了一个解决方案。只需删除显示和隐藏效果,如下所示:
jQuery('#myelement').tooltip({
show: false,
hide: false
});
我使用了相同的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 下的相对路径有问题,有时你可以看到它,有时你看不到,但它工作得很好!
我以前见过这种情况 - 这就是为什么我搜索了一个更灵活、易于使用且易于集成的工具提示。我通过Listly找到了一个很棒的工具 - 查看 WalkMe.com。我想你会发现结果非常令人满意。让我知道图像是如何工作的。
在编写我自己的简单工具提示时,我发现当我将工具提示附加到非正文元素时。在IE7,IE8和IE9中隐藏/显示工具提示之间是跳跃或抖动的。
例如,我有$('li').append(toolTip html..)
导致抖动或跳跃隐藏/显示工具提示。在Firefox,Chrome和Safari中没有跳跃或抖动。 在 IE7、IE8 和 IE9 中不行。
当我切换到 $('body').append(toolTip html..)
时,它按预期显示 IE 7、IE8 和 IE9,并且在 Firefox、Chrome 和 Safari 中仍然可以正常工作。