CSS輕鬆進入全屏

Question

我有一個包含圖像的大小的黑色背景div。

<div id="Banner"> 
    <img onclick="expand();" src="hola.jpg"> 
    </div> 

    #Banner { 
    position:relative; 
    height:50px; 
    width:50px; 
    margin:0 auto; 
    background-color:#000000; 
    -webkit-transition: all 0.5s ease-in-out 0.5s; 
    -moz-transition: all 0.5s ease-in-out 0.5s; 
    -o-transition: all 0.5s ease-in-out 0.5s; 
    transition: all 0.5s ease-in-out 0.5s; 
    } 

<script type="text/javascript"> 
    function expand(){ 
    document.getElementById('Banner').style['height'] = '250'; 
    document.getElementById('Banner').style['width'] = '250'; 
    } 
</script> 

因此，當圖像用戶點擊廣告，那麼div過渡到250，250

我的問題是，我希望它過渡到全屏。以下javascript 函數確實展開爲全屏，但不會出現過渡效果。我需要從沒有jQuery的JavaScript代碼中完成它。

function expand(){ 
    document.getElementById('Banner').style['position'] = 'absolute'; 
    document.getElementById('Banner').style['height'] = '100%'; 
    document.getElementById('Banner').style['width'] = '100%'; 
    document.getElementById('Banner').style['top'] = '0'; 
    document.getElementById('Banner').style['left'] = '0'; 
    } 

請指教。

更新：溶液

羅傑下面提供了一個替代的解決方案。如果文檔 已經滾動並且是另一個地方，則需要注意。將div擴展到完整的瀏覽器屏幕。

sz=getSize();  //function returns screen width and height in pixels 
currentWidth=200; 
currentHeight=200; 
scalex=sz.W/currentWidth; 
scaley=sz.H/currentHeight; 
transx=0-((document.getElementById("Banner").offsetLeft+(currentWidth/2))-(sz.W/2))+document.body.scrollLeft; 
transy=0-((document.getElementById("Banner").offsetTop+(cuttentHeight/2))-(sz.H/2))+document.body.scrollTop; 
transx = transx.toString(); 
transy = transy.toString(); 
document.getElementById("Banner").style['-webkit-transform'] = 'translate('+transx+'px,'+transy+'px) scale('+scalex+','+scaley+')'; 

Answer 1

如果過渡效果，你的意思是一個動畫，你必須分配在時間更改到propperties你想讓它動畫;記住：動畫會及時發生。如果你只是設置

document.getElementById('Banner').style['width'] = '100%'; 

它會立刻執行，你需要，請前往X％至100％Y中毫秒;例如

function changeWidth(){ 
    var initialWidth = document.getElementById('Banner').style['width']; 
    var stepValue = (CALCULATE_YOUR_FULL_WIDTH - currentWith)/1000; 

    var animate = function(){ 
     var element = document.getElementById('Banner'); 
     element.style['width'] = element.style['width'] + stepValue; 
    } 

    setInterval(animate, 1); 
} 

我希望你明白了，我沒有測試，所以我不能測試它的工作原理。

function changeWidth(){ 
     var initialWidth = 200; 
     var stepValue = (1000 - initialWidth)/1000; 

     var currentSize = initialWidth; 
     var animate = function(){ 
      currentSize = currentSize + stepValue; 
      var element = document.getElementById('Banner'); 
      element.style['width'] = (currentSize + stepValue)*1 + 'px'; 
     }; 

     setInterval(animate, 1); 
    }; 

這工作，你將不得不從它的工作，因爲它只是醜陋：P，閱讀jQuery的功能，使這個怎麼看這樣做，這是一個良好的開端。

編輯

好了，我終於實現了它。

http://jsfiddle.net/HJwPF/

Answer 2

如果，當你的意思是全屏，用戶在指定的寬度和高度時，指的是實際的瀏覽器內可用空間，您可以使用提示從這個link得到的值，而是使用其中的100％ 。

讓我知道它是否有幫助。

ADDED

代碼從一個鏈接，以防萬一它丟失：

function getSize() { 
    if (document.body && document.body.offsetWidth) { 
     winW = document.body.offsetWidth; 
     winH = document.body.offsetHeight; 
    } 
    if (document.compatMode=='CSS1Compat' && 
     document.documentElement && 
     document.documentElement.offsetWidth) { 
     winW = document.documentElement.offsetWidth; 
     winH = document.documentElement.offsetHeight; 
    } 
    if (window.innerWidth && window.innerHeight) { 
     winW = window.innerWidth; 
     winH = window.innerHeight; 
    } 

    return { W: winW, H: winH } 
}