1

语言：Javascript / jQuery / PHP

我想要完成的，类似于您在此页面的气泡中看到的悬停效果：
https ://www.vizify.com/rand-fishkin

我使用CSS3实现了类似的效果，但是过渡不如该页面上的过渡流畅，因此我选择使用 Javascript 代替。

我在这里做的是在悬停时将 div 气泡的宽度和高度增加 10%。

但我不知道如何按百分比调整边框半径和边距？

$(".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' });
});

悬停时：

  • 我想调整边框半径，以便即使在悬停时气泡也保持圆形（悬停的 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 （根据百分比进行划分和输出）

非常感谢，非常感谢所有帮助！

4

1 回答 1

1

爱，

试试这个：

$(".bubble").on('scale', function(e, s) {
    var data = $.data(this, 'size'),
        w = data.width,
        h = data.height;
    $(this).stop().animate({
        width: w * s,
        height: h * s,
        marginLeft: data.marginLeft - w * (s-1) / 2,
        marginTop: data.marginTop - h * (s-1) / 2
    });
}).each(function() {
    var $this = $(this);
    $.data(this, 'size', {
        width: $this.width(),
        height: $this.height(),
        marginLeft: parseInt($this.css('margin-left')),
        marginTop: parseInt($this.css('margin-top'))
    });
}).hover(function() {
    $(this).trigger('scale', [1.1]);
}, function() {
    $(this).trigger('scale', [1.0])
});

演示

笔记

  • 通过在样式表中提供过多的边框半径（例如，等于宽度），可以保证圆形度（？），而无需对其进行缩放。我认为这适用于所有浏览器，但需要测试。
  • 为了避免重复代码，我将缩放算法实现为自定义事件“缩放”的处理程序。
  • 边距缩放使气泡以原始中心为中心。
  • You will see in the demo that the bubble is wrapped in a static container that reserves space into which the bubble can expand. This will prevent the whole page needing to reflow as the bubble grows/shrinks. Other approaches are available, eg absolute positioning.
于 2012-11-03T10:09:20.977 回答