Question

我正在尝试将内部阴影添加到页面中的userphotos（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 / etc。事件，但各种浏览器都不能很好地支持它们。创建新照片后，可以更轻松地手动调用阴影创建代码。

最后一部分是你如何判断照片是否已经有阴影。理想情况下，您不必这样做，但如果您批量添加照片并且没有准备好选择新照片，那么上面的代码只需将标记类has-shadow添加到已处理的照片中并忽略那些已经拥有它的人。

除了处理移动/调整大小事件之外，你可以简单地在照片div中添加你的阴影div（与之相反的屁股）。只要你没有设置overflow:hidden它就可以使用基本的CSS并且不涉及任何javascript。

您也可以尝试使用CSS伪元素:before和:after，而不是通过javascript添加元素。取决于你的阴影究竟是什么样的，可能会或可能不会起作用，但它比通过javascript尝试做得更干净，性能更高。

jQuery计算position（）直播

2 个答案: