2

+10%/-10%ボタンをクリックすると、固定幅と高さの div 内の img 要素の幅を徐々に増減する必要があります。どうやってやるの？私が達成する必要があるのは、div 内に含まれる img 要素のある種のズームです (これには がありますoverflow:auto)。

パン可能にする必要があるため、jquery と jquery ui を使用しています。結果は Facebook のカバーのようなものになるはずです。ここでは、コンテナーに適応する (そして既に実装されている) 画像がありますが、ユーザーは含まれている img 要素をズームイン/ズームアウトし、パンして最適な外観を選択できます。

やり方がわかりません、助けてください！

どうもありがとう

4

4 に答える 4

3

DEMO: http://jsfiddle.net/7gVgX/

JQuery

$('div').click(function () {
    $(this).css({
        'width' : $(this).width()  * 1.1
      , 'height': $(this).height() * 1.1
    });
});
于 2013-09-19T08:56:27.693 に答える
0

次のようにして、画像の幅を取得できます。

var w = $("#image_id").css("width");

10% 増やすには、1.1 を掛けます。

w = w * 1.1;

次のようにして、この変更を画像に適用できます。

$("#image_id").css("width", w + "px");

于 2013-09-19T08:53:31.497 に答える
0

現在の画像の幅を取得し、それをインクリメントまたは減算するだけです。

css は次のとおりです。

img{
    width: 80%;
}

そしていくつかのjs：

width = $(theImg).css("width");
//remove the percent
width.substring(0, width.length - 1);
//now add value
width = width+10;
//set the new value to css
$(theImg).css("width", width+"%");
于 2013-09-19T08:56:16.210 に答える
0

または、アニメーション付き:

var el = $('#elementId'),
    w = el.width();
el.animate({ width: w * 1.1 }, 'fast');
于 2013-09-19T08:56:29.740 に答える