0

ズームイラスト

現在、ズーム操作は上のグラフのように示されています。下のグラフでズームアクションを実現したいと思います。ポイントはズームの原点です。現在のコードは次のとおりです。

        $("#popup").css("width",ui.value+"%");
    $("#largeText").css("width",ui.value+"%");
        $("#largeImg").css("width",ui.value+"%");

UI 値はパーカンテージの幅です (例: width : 100% 、 width : 200%)。高さは auto に設定されます。

ありがとう

4

2 に答える 2

1

それがあなたに答えを与えるかどうかはわかりませんが、アニメーションの例を次に示します

例を次に示します: http://jsfiddle.net/pRccr/6/

<div class="global">
<div class="item"></div>

</p>

CSS ::::::

.global {
      width:600px;
      height:600px;    
      background-color:#ff00ff;
      position:relative;
    }

    .item{
      position:absolute;
      width:3px;
      height:3px;
      background-color:#000;   
    }

JAVASCRIPT :::::

var start_size = 20;

var timer=setInterval(function(){

     start_size ++;

        $('.item').css('height',start_size+'px');
        $('.item').css('width',start_size+'px');

        $('.item').css('top', ($('.global').height()/2 - $('.item').height()/2) +'px');
        $('.item').css('left', ($('.global').width()/2 - $('.item').width()/2)+'px');

}, 50);​
于 2012-12-11T04:46:18.013 に答える
0

これは、ページ上の要素の位置によって異なります。画像で希望する結果を得るには、要素をページの垂直方向と水平方向の両方の中央に配置する必要があると思います。

margin:auto auto;
width:?px;
height:?px;
于 2012-12-11T04:18:31.823 に答える