jQuery计算位置（）活动

我试图在页面中的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);

});

jQuery（'.UserPhoto'）。每个（函数（）{
var photo=jQuery（this）；
var photowidth=photo.width（）；
var photoheight=photo.height（）；
var photoposition=photo.position（）；
var shadowcss={
'位置'：'绝对'，
'top'：photoposition.top+'px'，
“左”：photoposition.left+“px”，
“高度”：照片高度+px，
“宽度”：照片宽度+“px”
}
jQuery（this.），在（“”）之后；
jQuery（this.next（）.css（shadowcss）；
});

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

第二部分可能很棘手。有domsubtremodified/DOMNodeInserted/etc.事件，但各种浏览器都不支持它们。在创建新照片后，只需手动调用阴影创建代码就容易多了

最后一部分是如何判断照片是否已经有阴影。理想情况下，您不必这样做，但是如果您批量添加照片，并且没有准备好新照片的选择，那么您上面的代码可以简单地向已处理的照片添加一个marker class

has shadow

，而忽略已处理的照片

---

除了处理移动/调整大小事件之外，您还可以简单地将阴影div添加到photo div中（ass与之相反）。只要不设置溢出：隐藏，它就可以使用基本的CSS，而不涉及任何javascript

---

您还可以尝试使用CSS伪元素

：before

和

：after

，而不是通过javascript添加元素。取决于你的阴影看起来是什么样子，这可能有效，也可能无效，但它比试图通过javascript实现更干净、更高效。

首先，我认为添加阴影元素并在移动照片时处理其位置是非常低效的

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

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

$（'.UserPhoto'）。每个（函数（）{
$（此）.wrap（“”）
.parent（）
.附加（“”）；
});

---

下面是一个例子，让你更多地了解我在说什么。希望有帮助

“UserPhoto”中的HTML是什么样子的？我正在开发一个预制作的软件，它有太多的事件和功能，我需要一个独立的解决方案，这正是我一分钟前做的：D我做了以下工作（对于那些可能处于类似情况的人）尽管如果jQuery提供了一种现场制作东西的方法，那将是非常棒的。呵呵！嗯，我真的不知道你所说的“直播”是什么意思，但是如果这些图片是真的，那么有一些有用的事件，比如“开始”和“停止”，可以告诉你当前的位置。然后是事件，但我真的看不出它将如何应用到您的示例中。