- 是否有可能知道像图像这样的 HTML 元素在当前视口中是否可见，或者在滚动时是否可见？
- 如果它完全或部分可见，那么我如何才能看到部分的数量？
我试图从下图解释它：
底部的两个图像在视口中部分可见，如果向下滚动一点，这些图像将完全可见。
现在我想得到上述信息。
在实际场景中，我试图在我的相册中的图像悬停上获得弹出缩放效果，例如谷歌图像搜索。一切都很好，除非图像以所描述的方式放置，然后缩放的 div 也显示为一半。
图像完全在视口中的正常情况：
部分在视口中：
我真的很感谢你的帮助。
编码：
var albumDetailOnReady = function() {
$('.image').each(function(){
var photo = $(this);
var wrap = $(findParentByClassName(document.getElementById(photo.attr('id')), 'wrap'));
var row = $(findParentByClassName(document.getElementById(wrap.attr('id')), 'albumDetailRow'));
var visibleZone = $(wrap).find('.alDtlColumn');
var pictureBlock = $(visibleZone).find('.pictuteBlock');
var hiddenZone = $(wrap).find('.hiddenZone');
$(photo).load(function(){
if(177 > $(photo).width()){
var imgleft = ($(pictureBlock).width() - $(photo).width())/2 + 'px';
$(photo).css({'left': imgleft});
}
});
$(photo).hover(function(){
var y;
if($(photo).height() > $(photo).width()) {
y = ($(visibleZone).offset().top - 50) + 'px';
} else {
y = ($(visibleZone).offset().top + 50) + 'px';
}
var x;
if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {
x = ($(visibleZone).offset().left - 10) + 'px';
} else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {
x = ($(visibleZone).offset().left - 50) + 'px';
} else {
x = ($(visibleZone).offset().left - 20) + 'px';
}
$(hiddenZone).css({
'top': y,
'left': x,
'position': 'absolute',
'z-index': '10'
});
$(hiddenZone).fadeIn('fast');
}, function(){
});
$(hiddenZone).hover(function(){},function(){
$(hiddenZone).hide().stop(true, true);
});
});
}
var findParentByClassName = function(element, clazz) {
while (element.parentNode) {
element = element.parentNode;
if (hasClass(element, clazz)) {
return element;
}
}
return null;
}
function hasClass(element, cls) {
var regex = new RegExp('\\b' + cls + '\\b');
return regex.test(element.className);
}
我无法显示任何 HTML，因为我没有任何 HTML，我正在使用 ADF 框架。
但是为了解释：
每个图像都有两个区域：可见和隐藏。他们两个都在一个包裹里。现在悬停在图像上，我正在显示隐藏的 div。隐藏 div 的顶部和左侧是由可见 div 的顶部和左侧在某些条件下测量的。