4

jquery で画像ノードを作成し、元の画像の上に大きなバージョンとして表示したいと考えています。
コピーした画像は Chrome と Safari では表示されませんが、Internet Explorer と Firefox では機能します。コンソールはエラーを報告しません。インスペクターは、すべての適切な css プロパティを使用して複製された画像要素を表示しますが、要素のサイズは 0 x 0 ピクセルです。

サイズが 0x0 であることを示唆する CSS ルールは見当たりません。

これは状況を示すスクリーンショットです 検査官との状況のイラスト ( http://i.stack.imgur.com/AhiPf.png )

ここに動作のデモへのリンクがあります。firefox と chrome で画像をクリックしてみてください: download.toastlab.ch/segtest

編集：

要素を作成する Javascript コード:

$('.streamcontent').on('click', 'img.clickable', function () {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width,
        h = img.height;
    img = $(img).addClass('bigger');

    var tw = $(this).width();
    var th = $(this).height();

    var pos = $(this).position();
    var center = {
        top: pos.top + th / 2,
        left: pos.left + tw / 2
    };

    img.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left,
        width: tw,
        height: th,
        opacity: 0
    }).animate({
        top: center.top - h / 2,
        left: center.left - w / 2,
        height: h,
        width: w,
        opacity: 1
    }, 300, function () {
        $('body').one('click', function () {
            img.animate({
                top: pos.top,
                left: pos.left,
                width: tw,
                height: th,
                opacity: 0
            }, function () {
                img.remove();
            });
        });
    });
    $(this).parent().append(img);

});
4

2 に答える 2

2

それを見つけた。

最大サイズ (max-widthとmax-height) を指定する CSS ルールがあります。そのルールをオーバーライドして、より大きな画像を許可する必要がありました... 大きくすることができます。

これを行うために、max-width と height を途方もなく高い値 (999999999px) で上書きしました。この値が「webkit renderers の画像サイズの計算」をクラッシュさせ、画像サイズを 0 x 0 のままにしたようです。値を 9999px に設定すると問題が解決しました

これが Webkit のバグであるかどうかはわかりません。

于 2012-08-30T16:18:31.273 に答える
0

あなたのJSコードで

$('.streamcontent').on('click', 'img.clickable', function() {
    var img = new Image();
    img.src = $(this).attr('src');
    var w = img.width, h = img.height;
    img = $(img).addClass('bigger');
    ...

私はあなたが変わらなければならないと思います

var w = img.width, h = img.height;

に

var w = img.width(), h = img.height();

幅と高さはオブジェクト画像の関数であるためですが、よくわかりません。

于 2012-08-30T16:11:30.853 に答える