자바 스크립트로 이미지 다시 자르기

jQuery의 .css() 함수를 사용하여 javascript로 이미지를 리사이징하고 있습니다 (화면 크기에 따라 다름). 이제 여러개의 재조정 된 이미지를 애니메이션으로 만들려고하는데 이전 시스템의 성능이 떨어졌습니다 ... 브라우저가 애니메이션의 모든 단계에서 이미지의 크기를 조정한다는 것 같습니다. 이를 방지 할 수있는 방법이 있습니까? 예 : 한 번 이미지를 rescaling하고 애니메이션을이 재조정 된 버전을 사용하여?자바 스크립트로 이미지 다시 자르기

최대

편집 :

나는 또한이 문제 ....

당신은 이미지에 따라 폭과 높이를 고정하고있다한다 사업부로 슬캘링 된 이미지를 배치해야했다

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 대신 이미지를 이동해야합니다 (이미지가 이미지 내부로 이동합니다).

또는

은 심지어 당신이 화면 크기에 따라 사업부의 크기를 재조정 할 수 있으며 100 %로 이미지의 높이/폭을 지정할 수 있습니다 사업부를 이동할 수 있습니다. 당신의 reference

출처

2012-08-30 06:56:23 RAJ

자바 스크립트로 이미지 다시 자르기

답변

관련 문제