1

こんにちは、サイズ変更後にすべてが乱雑になるため、ウィンドウのサイズを変更しないで動作している私のページでアニメーションのようなズームを作成したいと思います:)。

概念は次のとおりです。アニメーションよりも .click() 関数に割り当てられたリンクをクリックすると、ページの左右がスライドして中央のセクションが「フルスクリーン」になり、終了をクリックすると左右がスライドします戻る。

私の現在のコードの問題は、ブラウザのサイズを変更してボタンの1つをクリックした後、追加の効果が作成されるか、単にコンテナのアニメーションが終了した後に画像サイズのアニメーションが実行されることです。

ウィンドウのサイズを変更する前のようにスムーズにする方法がわかりません。

コードでは、レイアウトは次のようになります。

<!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);

});
4

1 に答える 1

0

問題は、ブラウザのサイズを変更するたびに新しいクリック イベントを追加しているようです。上部にある古いクリックイベントのバインドを解除すると、resizeE機能します。更新されたフィドルのリンクは次のとおりです。

の先頭に 2 行追加resizeE

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

などの jQuery を介してイベントをバインドする場合.click、以前のイベントは上書きされないことに注意してください。

于 2012-11-12T20:18:35.407 に答える