0

ページ上の div を表示/非表示にする関数があります。これらの公開された div 内には、画像と「閉じる」ボタンがあります。これをズームアップ/ダウンしてアニメーション化しようとしています。

私は合理的なズーム機能を持っていますが、問題は、ズームがすべてページの読み込み時に発生することです。私が持っているコードでそれを達成するために何をする必要があるかについての提案（またはより良い方法を提案する）をいただければ幸いです。

ありがとう

HTML

 <div class="box1" id="box1ID" style="display:none;">
    <div class="page_image_wrapper">
    <!--<img src="images/1.png" width="1080" height="1920">-->
    <div id="zoom-box">
<img src="images/13.png" width="1080" height="1920" />
</div>
    </div> 
    <div class="close_box">
    <a href="#" name="1" onclick="conceal('box1ID');">
    <img src="images/transparent.png" width="100" height="100"> 
    </a>
    </div>
  </div>

表示/非表示機能

function conceal(boxId) {      
        if(document.getElementById(boxId).style.display=='block') {
          document.getElementById(boxId).style.display='none';
        }
        return false;
    }  

function show(boxId) {
    if(document.getElementById(boxId).style.display=='none') {
      document.getElementById(boxId).style.display='block';
    }
    return false;
}

ズームボックス機能:

    $(document).ready(function () {
$('#zoom-box').animate({
    width:'1080px',
    height:'1920px',
    top:'0',
    left:'0',
    'font-size':'50px',
    'line-height':'300px'
}, 1000);
    });
4

1 に答える 1

0

ズームを関数でラップし、div が表示された後に呼び出します。ズームのためにすでに jQuery を使用しているため、show 関数と hide 関数にも jQuery を使用しました。 

$(document).ready(function () {
    function zoomIn() {
        $('#zoom-box').animate({
            width:'1080px',
            height:'1920px',
            top:'0',
            left:'0',
            'font-size':'50px',
            'line-height':'300px'
        }, 1000);
    }
    function conceal(boxId) {
        $('#' + boxId).hide();
        // You could potentially create a zoomOut function and call it here to 'reset' the zoom
        // zoomOut();
    }
    function show(boxId) {
        $('#' + boxId).show();
        // Call your zoom function here
        zoomIn();
    }
});

コメントに記載されているように、zoomOut 関数を作成してズームを「リセット」し、それを非表示関数で呼び出すこともできます。

于 2013-07-10T16:44:33.767 に答える