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

ご意見をお聞かせください。

更新：ソリューション

以下のロジャーは、代替ソリューションを提供しています。これは、ドキュメントがすでにスクロールされていて、別の場所にある場合に注意します。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 に答える