0

ページの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);

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

最初の部分は簡単です。イベントを移動/サイズ変更し、そこでシャドウ要素を更新するために接続します。

2番目の部分は難しい場合があります。DOMSubtreeModified/DOMNodeInserted/etc があります。イベントですが、さまざまなブラウザーで十分にサポートされていません。新しい写真を作成した後、影作成コードを手動で呼び出す方がはるかに簡単です。

最後の部分は、写真にすでに影があるかどうかをどのように判断するかです。理想的にはその必要はありませんが、写真をまとめて追加し、新しい写真の選択が実際には準備されていない場合、上記のコードは、has-shadow既に処理された写真にマーカー クラスを追加し、既に処理された写真を無視するだけです。それを持っている。

移動/サイズ変更イベントを操作する代わりに、写真 div 内にシャドウ div を追加するだけです (その後ではなく)。設定しない限りoverflow:hidden、JavaScript を使用しなくても基本的な CSS だけで動作します。

JavaScript を介して要素を追加する代わりに、CSS 疑似要素を使用することもできます:before。:after影がどのように見えるかによって、それが機能する場合と機能しない場合がありますが、javascript を使用して実行するよりもはるかにクリーンでパフォーマンスが向上します。

于 2012-12-12T14:41:29.280 に答える