Javascript 即使我靠近容器div或浏览器的边缘,如何正确显示缩略图的放大版本?
我有一个充满60x60图像的div,按5行排列。我想显示一个放大的版本,在300x300最大的每个缩略图时,你悬停每个图像。我周围有一个隐藏溢出的div,所以如果你将鼠标悬停在某个角落的图像上,放大的图像将被切断,所以我需要将图像翻转到另一侧。我目前的代码无法解决这个剪辑问题。有没有关于如何正确实现这一点的想法,或者有没有更好地使用jQuery的打包解决方案Javascript 即使我靠近容器div或浏览器的边缘,如何正确显示缩略图的放大版本?,javascript,jquery,Javascript,Jquery,我有一个充满60x60图像的div,按5行排列。我想显示一个放大的版本,在300x300最大的每个缩略图时,你悬停每个图像。我周围有一个隐藏溢出的div,所以如果你将鼠标悬停在某个角落的图像上,放大的图像将被切断,所以我需要将图像翻转到另一侧。我目前的代码无法解决这个剪辑问题。有没有关于如何正确实现这一点的想法,或者有没有更好地使用jQuery的打包解决方案 $('a.thumb img').live('mouseover', showThumbnail); $('a.thumb img
$('a.thumb img').live('mouseover', showThumbnail);
$('a.thumb img').live('mouseout', function() { $('#image-thumbnail').hide(); });
$('#images a.thumb').live('click', function() { return false; }); /* disable clicks */
function showThumbnail() {
var pos = { left: this.offsetLeft, top: this.offsetTop }
var css = { }
css['left'] = pos.left + 60 + 5;
if (css['left'] + 300 > this.offsetParent.offsetWidth)
{
css['right'] = pos.left - 5 + 'px';
delete css['left'];
} else {
css['left'] += 'px';
}
css['top'] = pos.top + 60 + 5;
if (css['top'] + 300 > this.offsetParent.offsetHeight+50)
{
css['bottom'] = pos.top - 5 + 'px';
delete css['top'];
} else {
css['top'] += 'px';
}
$('#image-thumbnail').css(css);
$('#image-thumbnail').html("<img style='max-width: 300px; max-height: 300px;' src='" + $(this).parent()[0].href + "' />").show();
}
我正在使用以下工具提示在Flot生成的图表上显示工具提示,它具有窗口的边缘检测逻辑
function showTooltip(x, y, contents){
$('<div id="tooltip">' + contents + '</div>').appendTo('body');
var wx=$(window).width();
var wy=$(window).height();
var ox=$('#tooltip').width();
var oy=$('#tooltip').height();
var t, l, b, a;
b=x-40; a=wx-x-40;
if(b<ox && ox>a) l=20;
else if(ox<a) l=x+20;
else l=x-ox-20;
b=y-40; a=wy-y-40;
if(b<a) t=y+20;
else t=y-oy-20;
$('#tooltip').css({top:t,left:l,opacity:0.80}).fadeIn(200);
}
在绝对定位的单独div中弹出它,具有更高的z索引,并且位于具有剪裁的div之外。我通常使用
$('#largerImageDiv').html('<img src="path for my larger image" />');
$('#largerImageDiv').show();
在较大的图像div中,您可以指定一种样式,使其绝对定位,最好是在页面的另一部分,而他们不会同时使用缩略图区域。您设置的z指数高于该点的任何其他div
$('#largerImageDiv').hide();