0

我有一个包含图像的大小的黑色背景 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+')';
4

2 回答 2

1

如果，当您指的是全屏时，您指的是实际的浏览器内部可用空间，您可以使用此链接中的提示来获取值并在分配宽度和高度时使用它们而不是 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 }
}
于 2012-10-18T13:45:26.823 回答
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/

于 2012-10-18T14:25:34.170 回答