jQuery 크기 조정 요소 및 해당 내용을 동적으로 onClick

안녕하세요, 크기 조정 후 모든 지저분 해지기 때문에 당신이 창 크기를 조정하지 않습니다 util 작동하는 내 페이지에 애니메이션 같은 확대/축소를 만들고 싶습니다 :).jQuery 크기 조정 요소 및 해당 내용을 동적으로 onClick

개념은 애니메이션과 함께 .click() 함수에 할당 된 링크를 클릭하면 페이지의 왼쪽과 오른쪽이 슬라이드 아웃되고 가운데 섹션이 "전체 화면"이되고 exit를 클릭하면 왼쪽 및 오른쪽 슬라이드를 다시 넣으십시오.

현재 코드의 문제는 브라우저의 크기를 조정하고 추가 효과를 생성하는 것보다 단추 중 하나를 클릭 한 후 또는 conatiner의 animaton이 완료된 후 단순히 이미지 크기 애니메이션이 실행되는 것입니다. .

그리고 저는 창 크기를 조정하기 전에 그렇게 부드럽게 만드는 법을 모릅니다.

<!doctype html> 
<html> 
<head> 
<style> 
html, body {height:100%; padding:0; margin:0; overflow:hidden;} 
#left{width:400px; height:100%; position:absolute; left:0; top:0; overflow:hidden;} 
#right{width:200px; height:100%; position:absolute; right:0; top:0; overflow:hidden;} 
#center{height:100%; position:absolute; left:400px; right:200px; top:0; overflow:hidden;} 
</style> 
</head> 
<body> 
<div id="left"></div> 
<div id="center"> 
    <a href="#" onClick="return false;" class="zoom">Fullscreen</a> 
    <a href="#" onClick="return false;" class="downsize">Exit</a> 
    <img src="img.jpg" /> 
</div> 
<div id="right"></div> 
</body> 
</html>

와 jQuery 코드는 이제 다음과 같습니다 :

코드의 레이아웃은 다음과 같습니다

function resizeE(){ 
     var wWidth = $(window).width(); 
     var wHeight = $(window).height(); 
     var cWidth = $('#center').width(); 
     var cHeight = $('#center').height(); 
     var iWidth = $('#center img').width(); 
     var iHeight = $('#center img').height(); 
     var calcWidth = wHeight*1.7777; 
     var iMargin = (cWidth-calcWidth)/2; 
     var c2Width = wWidth-600; 
     var i2Margin = (c2Width-calcWidth)/2; 
     var posLeft = $('#center').position().left; 
     if(posLeft == '400'){ 
      $('#center img').css({'height': wHeight+'px', 'width': calcWidth+'px', 'margin-left': iMargin+'px'}); 
     }else{ 
      $('#center img').css({'width': wWidth+'px', 'height': (wWidth/1.7777)+'px', 'margin-left': '0'}); 
     } 
     $('.zoom').click(function(){ 
      $('.downsize').fadeIn('fast'); 
      $('#center img').animate({width: wWidth+'px', height: (wWidth/1.7777)+'px', marginLeft:'0'}, 1200); 
      $('#center').animate({left: '0', right: '0'}, 1200); 
        $('#left').animate({marginLeft:'-400px'}, 1200); 
        $('#right').animate({marginRight:'-200px'}, 1200); 
     }); 
     $('.downsize').click(function(){ 
      $('.downsize').fadeOut('fast'); 
      $('#center img').animate({width: calcWidth+'px', height: wHeight+'px', marginLeft: i2Margin+'px'}, 1200); 
      $('#center').animate({left: '400px', right: '200px'}, 1200); 
        $('#left').animate({marginLeft:'0'}, 1200); 
        $('#right').animate({marginRight:'0'}, 1200); 
     }); 

    } 
jQuery(document).ready(function($) { 
    $('.downsize').hide(); 
    resizeE(); 
    $(window).resize(resizeE); 

});

출처

2012-11-12 Laci K

실용적인 데모를 게시 할 수 있습니까? (사이트 또는 jsfiddle에 대한 링크) – Snuffleupagus

여기에 [jsfiddle url] (http://jsfiddle.net/Piszi/shrmv/3/)이 나와 있습니다. 새 탭에서 결과 프레임을 열어 봅니다. –

그것은 당신이 새로운 클릭 이벤트 매를 추가하는하는 문제처럼 보인다 브라우저 크기를 조정할 때. resizeE 상단의 이전 클릭 이벤트를 바인딩 해제하면 작동합니다. updated fiddle link입니다.

두 줄은 이전 이벤트를 덮어 쓰지 않습니다, 당신은, jQuery를 통해 같은 .click을 이벤트를 바인딩 할 때 명심 resizeE

$('.downsize').off('click'); 
$('.zoom').off('click');

의 상단에 추가.

출처

2012-11-12 20:18:35 Snuffleupagus

완벽하게 작동합니다. 감사합니다! –

jQuery 크기 조정 요소 및 해당 내용을 동적으로 onClick

답변

관련 문제