我有一个 div 网格,每个 div 中都有内容:一些文本、一张图片和某种 [x] 按钮。这些 div 的位置都设置为绝对(这是一个不规则的网格,这就是我选择使用绝对的原因)。
我现在想做的是当鼠标光标位于它们上方时让它们展开(并将其放在网格中其他重叠的 div 之上)。我设法在这里做到这一点:http://jsfiddle.net/CvhkM/2833/ 。问题是我希望它恢复到其初始位置和尺寸(每个 div 都有自己的位置和尺寸)并且由于某种原因它无法工作......(请注意,这是我第一次使用 jQuery)。哦,我可以补充一下,如何限制它不扩展到区域(矩形区域)之外?
最佳答案
上面提到的溢出问题肯定有帮助,你可以在 CSS 中做到这一点。我个人会做overflow:hidden或overflow:auto,这样溢出的内容就会保持隐藏状态,直到该框悬停在上面。
我在下面添加了代码来帮助您使代码变得动态,您可以随意调整悬停动画上的数字以及乘数,这可以让您在调整大小方面更进一步根据原始尺寸:)
var multiplying_factor = 1.5;
$(function() {
$('.div').each(function() {
$(this).data('original_position', $(this).offset());
$(this).data('original_width', $(this).width());
$(this).data('original_height', $(this).height());
$(this).hover(function() {
$(this).stop().animate({
left : $(this).data('original_position').left - ($(this).data('original_width') * multiplying_factor / 4),
top : $(this).data('original_position').top - ($(this).data('original_height') * multiplying_factor / 4),
width : $(this).data('original_width') * multiplying_factor,
height : $(this).data('original_height') * multiplying_factor
}, 300);
},function() {
$(this).stop().animate({
left : $(this).data('original_position').left,
top : $(this).data('original_position').top,
width : $(this).data('original_width'),
height : $(this).data('original_height')
}, 300);
});
});
});
关于jquery - 使用 JQuery 向各个方向展开 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10449412/