1

jQueryを使用してdivまたはspanのサイズを変更しようとしていますが、次の例のように、左クリックボタンを押したままにしている場合のみmetro.js:

http://www.claudiowebdesign.it/snippets/metro/

( を読んでみましたmetro.jsが、動作する特定のコードが見つかりません)

ありがとうございました

4

3 に答える 3

1

マウスダウンとマウスアップでdivのサイズを変更できます。例：

$('p').mousedown(function() {
    $('p').css('width', '180');
});

$('p').mouseup(function() {
    $('p').css('width', '200');
});

マウスダウンで要素は 180px、マウスアップで要素は 200px です。

ライブ: http://jsfiddle.net/j5gsu/

メトロの例では、3D トランスフォームを使用しています。http://www.w3schools.com/css3/css3_3dtransforms.aspで確認できます。

于 2012-09-23T16:08:00.750 に答える
1

オブジェクトをスケーリングするために、これを少し前に書きました。これを機能させるには jQuery が必要です。

changeSize = function(obj, size, time) {
    var left, r, top, _ref;
    _ref = obj.position(), left = _ref.left, top = _ref.top;
    r = obj.width() / 2;
    return obj.animate({
      left: (left + r - size / 2) + 'px',
      top: (top + r - size / 2) + 'px',
      height: size + 'px',
      width: size + 'px'
    }, time);
  };

これは、オブジェクトが絶対位置にあり、正方形であることを前提としています。絶対配置されていない場合は、 left: および top: プロパティの変更を削除するだけです。オブジェクトが二乗されていない場合は、少し変更する必要があります (おそらくスケーリング係数が必要な場合は、その係数で と を乗算width()し、の代わりに にheight()書き込みます。animatesize

于 2012-09-23T16:08:21.233 に答える
1

この素敵な jQuery プラグインを見つけました: http://ricostacruz.com/jquery.transit/

簡単なフィドルを作成しました：http://jsfiddle.net/Ub5nX/1/

コードはきれいに見えます:

$('#clickme').mousedown(function() {
    $(this).transition({ scale: 0.9 }, 100)
});

$('#clickme').mouseup(function() {
    $(this).transition({ scale: 1 }, 200)
});

私はそれが好きです、あなたもそう願っています。

于 2012-09-23T16:43:27.740 に答える