0

jQuery の .css() 関数を使用して、javascript を使用して (画面サイズに応じて) Web サイトの画像を再スケーリングしています。現在、再スケーリングされた画像の束をアニメーション化しようとしていますが、古いシステムではパフォーマンスが低下します...私の推測では、ブラウザーはアニメーションのすべてのステップで画像を再スケーリングします。それを防ぐ方法はありますか。たとえば、画像を一度再スケーリングし、この再スケーリングされたバージョンをアニメーションに使用することはできますか?

マックス

編集：

function adjustTile(contentHeight)
{
    TILE_GLOBAL.values.tileWidth = contentHeight/TILE_GLOBAL.def.tileWidthRatio;
    var windowWidth = jq(window).width();
    var tileStackDistance = windowWidth / TILE_GLOBAL.values.tiles.length / 3;
    var tileOffset = (windowWidth - TILE_GLOBAL.values.tileWidth - tileStackDistance*(TILE_GLOBAL.values.tiles.length-1))/2;


for(var i = 0; i < TILE_GLOBAL.values.tiles.length; i++)
{
    var position = tileOffset + tileStackDistance * i;
    jq(TILE_GLOBAL.values.tiles[i]) .css({  'left' : position + 'px', 
                                            'z-index' : TILE_GLOBAL.values.tiles.length - i, 
                                            'width' : TILE_GLOBAL.values.tileWidth + 'px', 
                                            'height' : contentHeight + 'px',
                                            'border' : TILE_GLOBAL.values.tileBorderSize + 'px solid #a3aba5'})
                                    .attr('data-original_pos', position);
}
jq('.tile-description').css({'font-size' : contentHeight / 20 + 'px'});
}

function slideTiles(e)
{
    TILE_GLOBAL.values.cancelReset = true;
    var chosenTile = jq(e.delegateTarget);
    var prevTiles = chosenTile.prevAll('div');
    var nextTiles = chosenTile.nextAll('div');

    for(var i = 0; i < prevTiles.length; i++)
    {
        jq(prevTiles[i]).animate({left :  jq(prevTiles[i]).attr('data-original_pos') - (TILE_GLOBAL.values.tileWidth/3*2.5) + 'px'}, {queue : false});
    }

    chosenTile.animate({left :  chosenTile.attr('data-original_pos') + 'px'}, {queue : false});

    for(var i = 0; i < nextTiles.length; i++)
    {
        jq(nextTiles[i]).animate({left :  jq(nextTiles[i]).attr('data-original_pos') + 'px'}, {queue : false});
    }
}


<div class="tile"><a href="isiplan-rv.html" target="_self"><img class="tile-image" src="images/template/tiles/rvtile.jpg" border="0" /></a>
<div class="tile-overlay"> </div>
<img class="tile-product-headline" src="images/template/tiles/rvheadline.png" border="0" />
<div class="tile-shadow"> </div>
<p class="tile-description"></p>
</div>
4

1 に答える 1

0

私もこの問題を抱えていました....

再スケーリングされた画像を、画像サイズごとに幅と高さが固定されている div に配置し、画像のみではなく、その div を移動する必要があります (画像はその中に移動します)。

また

画面サイズに合わせて div のサイズを変更したり、画像の高さ/幅を 100% に指定したり、div を移動したりできます。

ご参考までに

于 2012-08-30T06:56:23.947 に答える