jquery - 单击时如何使用jquery获取临时html元素调整大小？

Question

我正在尝试使用 jQuery 调整 div 或 span 的大小，但前提是您按住左键单击按钮，例如以下示例metro.js：

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

（我试图阅读metro.js，但我找不到有效的具体代码）

谢谢

Answer 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)
});

我喜欢它，希望你也喜欢。

Answer 2

您可以在 mousedown 和 mouseup 上调整您的 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 查看。

Answer 3

前段时间写了这个来缩放一个对象。您将需要 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()andheight()与该因子相乘并将其写入animate而不是size.