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

请建议。

更新：解决方案

Roger下面提供了另一种解决方案。如果文件，这照顾已经滚动，是另一个地方。将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

如果您的意思是全屏，则表示实际的浏览器内部可用空间，您可以使用此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 }
}

Answer 2

如果通过过渡效果表示动画，则必须在您希望动画制作的时间内将更改划分为属性;记住：动画及时发生。如果你刚设置

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

它会立即执行，你需要在Y毫秒内转到X％到100％; e.g。

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/

CSS轻松进入全屏

2 个答案: