言語: Javascript / jQuery / PHP
私が達成しようとしているのは、このページのバブルに表示されるホバー効果に似ています:
https://www.vizify.com/rand-fishkin
CSS3を使用して同様の効果を達成しましたが、遷移はそのページのものほどスムーズではなかったため、代わりに Javascript を使用することにしました。
ここで行っているのは、ホバーしたときに div バブルの幅と高さを 10% 拡大することです。
しかし、 border-radiusとmarginをパーセンテージで調整する方法がわかりません。
$(".colored-bg").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
$(this).stop().animate({ height: $.data(this,'size').height*1.1,
width: $.data(this,'size').width*1.1,
margin: '-13.5px auto' });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height,
width: $.data(this,'size').width,
margin: '-13.5px auto' });
});
ホバー時:
ホバーしてもバブルが丸いままになるようにborder-radiusを調整したい（ホバーしたdivサイズの高さ/幅の1/2ピクセル数）
マージンを 1/8 の負のピクセル (ホバーした div サイズの) に動的に変更したい - ホバーしたときに、div が垂直方向に中央に配置されたままになるようにします (成長したときに単純に下に拡大しないようにします)。
うんざりするのはもう十分です。ここに、私がこれまでに行ったことを反映したデモを示します。
現在、300px (div 自体よりも大きい) の固定ボーダー半径を使用して、ホバーしても div を丸め、余白を静的な方法で変更しています (パーセンテージに基づいていません)。
パーセンテージに基づいて成長トランジションを追加しているため、ホバーされた div に対して静的な境界半径または静的マージンを実行できません。
私の質問は、ボーダー半径とマージンをパーセンテージで指定するにはどうすればよいですか?
これが幅を 10% 拡大する方法である場合:width: $.data(this,'size').width*1.1
マージンを現在の高さの 1/8 に設定するにはどうすればよいでしょうか?
私はこの投稿に出くわしました: https://stackoverflow.com/a/3630768/1399030 (パーセンテージに基づく分割と出力)
どうもありがとう、すべての支援は本当に感謝しています!