实时计算位置() jQuery

Question

我正在尝试添加内阴影到页面中的用户照片(img)。它工作得很好，除非动态添加或从其位置移动一个userphoto元素。当元素移动时，有没有办法计算实时位置或重新计算位置。

jQuery('.UserPhoto').each(function(){

    var photo = jQuery(this);
    var photowidth = photo.width();
    var photoheight = photo.height();
    var photoposition = photo.position();
    var shadowcss = {
            'position' : 'absolute',
            'top' : photoposition.top + 'px',
            'left' : photoposition.left + 'px',
            'height' : photoheight + 'px',
            'width' : photowidth + 'px'
        }
    jQuery(this).after("<div class='userPhotoShadow'></div>");
    jQuery(this).next().css(shadowcss);

});

Answer 1

首先，我认为添加一个阴影元素是非常低效的，并且必须在照片被移动时处理它的位置。

另一种方法(更好的imo)是在你的照片周围包裹一个元素，然后在里面附加你的阴影，就像这样：

$('.UserPhoto').each(function () {
    $(this).wrap('<div class="UserPhotoWrapper" />')
        .parent()
        .append('<div class="UserPhotoShadow" />');
});

这是一个fiddle，可以向您展示更多我正在讨论的内容。希望这能有所帮助！

Answer 2

第一部分很简单。挂接以移动/调整事件大小，并在那里更新您的阴影元素。

第二部分可能比较棘手。有DOMSubtreeModified/DOMNodeInserted/等事件，但它们不被各种浏览器很好地支持。在创建新照片后，手动调用阴影创建代码要容易得多。

最后一部分是如何计算照片是否已经有阴影。理想情况下，您不必这样做，但如果您批量添加照片，并且没有真正准备好选择新照片，那么上面的代码可以简单地将一个标记类has-shadow添加到它已经处理的照片中，而忽略那些已经有它的照片。

或者，使用移动/调整大小事件，您可以简单地将您的阴影div添加到照片div内(ass，而不是后面)。只要你不设置overflow:hidden，它将只在基本的CSS下工作，不涉及任何javascript。

您也可以尝试使用CSS伪元素:before和:after，而不是通过javascript添加元素。这取决于你的影子到底是什么样子，这可能会也可能不会起作用，但它比试图通过javascript来做要干净得多，性能也好得多。