使用Javascript重新缩放图像

我使用jQuery的.css（）函数在JavaScript中重新调整网站上的图像（取决于屏幕大小）。现在，我正在尝试对一些重新缩放的图像进行动画处理，并在较早的系统上压缩性能... 我的猜测是浏览器在动画的每一步都重新调整了图像。有什么办法可以防止通过一次重新缩放图像并使用动画的重新缩放版本？使用Javascript重新缩放图像

最大

编辑：

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>

来源

2012-08-30 mxcd

并请粘贴一些代码，或设置[小提琴]（http://jsfiddle.net）。 – adeneo

如果你的问题没有解决，你应该回应哪些进一步的问题，如果解决了，你应该接受一些答案，以便其他人可以知道该线程已关闭 – RAJ

我也有这个问题....

你应该把你重新缩放图像到应该有固定的宽度和高度，每幅图像一个div大小，并应该移动该div（它会移动它内部的图像），而不是图像。

即使可以重新调整大小的div按屏幕大小和可以指定图像的高度/宽度为100％，可以移动DIV。

为了您reference

来源

2012-08-30 06:56:23 RAJ

使用Javascript重新缩放图像

回答

相关问题