jQueryを使用してdivまたはspanのサイズを変更しようとしていますが、次の例のように、左クリックボタンを押したままにしている場合のみmetro.js
:
http://www.claudiowebdesign.it/snippets/metro/
( を読んでみましたmetro.js
が、動作する特定のコードが見つかりません)
ありがとうございました
jQueryを使用してdivまたはspanのサイズを変更しようとしていますが、次の例のように、左クリックボタンを押したままにしている場合のみmetro.js
:
http://www.claudiowebdesign.it/snippets/metro/
( を読んでみましたmetro.js
が、動作する特定のコードが見つかりません)
ありがとうございました
マウスダウンとマウスアップで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で確認できます。
オブジェクトをスケーリングするために、これを少し前に書きました。これを機能させるには 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
この素敵な 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)
});
私はそれが好きです、あなたもそう願っています。