javascript - 无法计算悬停元素的确切位置

Question

我只是想根据周围的空间让鼠标悬停div的位置在右边。我可以在前两列中以某种方式执行此操作，但不能用于其他列。可能是我在写条件状态时的计算有误。

有人可以帮忙吗？

JS fiddle 网址:

http://jsfiddle.net/mufeedahmad/2u1zr11f/7/

JS代码:

 $('.thumb-over-team li').find('.cover').css({opacity:0});

        $('.thumb-over-team li').on('mouseenter', function(){    

                var $this = $(this), 
                    thisoffset = $this.position().left,
                    openDivId = $(this).find('.cover'),
                    thumbContainer = '.thumb-over-team',
                    speedanim = 200;


                 if(thisoffset + openDivId.outerWidth() >= $(thumbContainer).outerWidth()){
                     //thisoffset = $(thumbContainer).outerWidth() - openDivId.outerWidth() - 212;
                    thisoffset = thisoffset - openDivId.outerWidth()+10;                     
                     openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':-thisoffset}, 200);
                     }else{                      
                         openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':'212px'}, 200); 
                     }






        }).on('mouseleave', function(){         
            $(this).find('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200);

        });

        $('.close-parent').on('click', function(){          
            $(this).parents('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200);

        });;

Answer 1

在您的第一个条件中，尝试将偏移的位置计算为:

thisoffset = ($(thumbContainer).outerWidth() - openDivId.outerWidth() - thisoffset);

这样，当出现的正方形 (.cover) 不适合容器时，您将调整它，使其尽可能靠近其最右边缘:(最大宽度 - 出现的正方形宽度 - 当前 li 位置)

以这种方式计算，您可以使用新的正偏移量对其进行动画处理:

openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':thisoffset}, 200);

看到它工作 here .

对于“几乎”适合的元素，当前系统并不完全精确，因为我在之前的评论中已经指出:出现的正方形，即使它的不透明度为 0，仍将位于包含元素内(($(thumbContainer)) 或 .thumb-over-team) 并将其宽度添加到容器的总宽度。

因此，您的条件可能认为容器中有足够的可用空间来容纳可扩展元素，但这会超出屏幕范围。例如，请注意从一开始就有一个水平滚动条，这是由这种效果引起的，其中包含的 .thumb-over-team 元素不适合屏幕。

但我要说的是，在这一点上更精确将需要一种全新的系统方法，其中出现的 .cover 元素不在包含的 ul .thumb-over-team