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

【问题标题】：How to get a temporary html element resize using jquery when clicking?单击时如何使用jquery获取临时html元素调整大小？
【发布时间】：2012-09-15 05:58:16
【问题描述】：

我正在尝试使用 jQuery 调整 div 或 span 的大小，但仅当您按住左键单击时，例如 metro.js 的示例：

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

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

谢谢

【问题讨论】：

您必须使用“onmousepress/onmousedown”和“onmouserelease/onmouseuo”事件来捕捉您想要更改 DIV 大小的时刻

标签： jquery resize microsoft-metro html

【解决方案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() 乘以该因子并将其写入animate 而不是size .

【讨论】：

如果你没有将它定位为绝对，那么我想通过你缩小的量来增加边距是有意义的，这样你就可以获得对象“下沉”的效果，即使它在浮动区域中。如果你愿意，我可以给你举个例子。

【解决方案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查看。

【讨论】：

使用 css 您应该将 px 添加到大小。只有在使用 jquery .width 和/或 .height 方法时，您才应该使用原始数字。
你会这么说，但正如你在我的 jsfiddle 中看到的那样，这是可行的。 jQuery 自己添加 px。

【解决方案3】：

我发现了这个不错的 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)
});

我喜欢，希望你也喜欢。

【讨论】：