我使用jQuery的.css()函数使用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>
答案 0 :(得分:0)
我也有这个问题......
你应该将重新缩放的图像放入一个div,该div应该根据图像大小具有固定的宽度和高度,并且应该移动该div(它将在其中移动图像),而不是仅图像。
OR
即使您可以根据屏幕尺寸重新缩放div尺寸,也可以将图像的高度/宽度指定为100%,并且可以移动div。
适用于您的reference