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

如果你所说的转换效果是指动画，你必须在你想让它动弹的时候把变化除以它的倾向；记住:动画是在时间上发生的。如果你刚刚

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

它将立即执行，您需要改为，在Y毫秒内达到X%到100%。

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

如果您指的是全屏，您指的是实际的浏览器内部可用空间，您可以使用来自这个链接的提示来获取值并在分配宽度和高度时使用它们而不是100%。

如果有帮助请告诉我。

添加了

链接中的代码，以防丢失：

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 }
}