0

我正在尝试为页面中的用户照片（img）添加内部阴影。除非动态添加用户照片元素或从其位置移动，否则它可以正常工作。无论如何，当元素移动时，是否可以计算实时位置或重新计算位置。

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);

});
4

2 回答 2

1

首先，我认为附加阴影元素的效率非常低，并且在移动照片时必须处理其位置。

另一种方法（更好的 imo）是在你的照片周围包裹一个元素，然后在其中附加你的阴影，如下所示：

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

这是一个小提琴，可以向您展示我在说什么。希望有帮助！

于 2012-12-12T15:02:38.243 回答
0

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

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

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

除了使用移动/调整大小事件之外，您还可以简单地将阴影 div 添加到照片 div 中（而不是在它之后）。只要您不设置overflow:hidden它就可以使用基本的 CSS 并且不涉及任何 javascript。

您也可以尝试使用 CSS 伪元素:before，:after而不是通过 javascript 添加元素。取决于你的影子到底是什么样子，这可能会或可能不会起作用，但它比尝试通过 javascript 来实现更清洁、更高效。

于 2012-12-12T14:41:29.280 回答