jQuery的resize元素和它的內容onClick動態

你好，我想創建一個縮放像我的網頁上的動畫工作util你不調整窗口，因爲在調整大小後一切都變得凌亂:)。jQuery的resize元素和它的內容onClick動態

這個概念是：當你點擊一個分配給.click（）函數的鏈接，而不是動畫時，頁面的左側和右側滑出，中間部分變成「全屏」，如果你點擊退出，左，右滑回。

的問題，我當前的代碼是您調整瀏覽器，並單擊一個按鈕比及牡丹額外的效果或根本的圖像尺寸動畫運行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網址]（http://jsfiddle.net/Piszi/shrmv/3/）在工作中查看它打開新選項卡中的結果框架。 –

它看起來像問題是您要添加一個新的單擊事件每當你調整瀏覽器的大小。如果您解除綁定resizeE頂部的舊點擊事件，則可以使用。這是updated fiddle link。

兩行加入到resizeE

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

頂部請記住，當你通過jQuery綁定事件，如.click，它沒有覆蓋任何以前的事件。

來源

2012-11-12 20:18:35 Snuffleupagus

完美的作品，謝謝！ –

jQuery的resize元素和它的內容onClick動態

回答

相關問題