Question

语言： Javascript / jQuery / PHP

我想要完成的任务，与您在此页面上看到的悬停效果类似：的 https://www.vizify.com/rand-fishkin

我使用 CSS3 完成了类似的效果，但转换并不像该页面那样顺利，所以我选择使用Javascript代替。

我在这里做的是我增加宽度＆amp;徘徊时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' });
});

悬停时：

我想调整边框半径，使气泡保持圆形即使在悬停时（悬停的div大小的高度/宽度的1/2像素数）
我希望将余量更改为1/8负像素（悬停的div大小） - 动态 - 悬停时使div保持垂直居中（这样当它增长时，它不会只需向下扩展）。

足够的yapping， here is a demo 反映了我到目前为止所做的一切。

目前，我使用300px的固定边框半径（大于div本身），即使在悬停时也保持div舍入，并且我以静态方式更改边距（不基于百分比）。

由于我正在添加基于百分比的增长转换，因此我无法为悬停的div执行静态边界半径或静态边距。

我的问题是，如何指定border-radius＆amp;利润百分比？

如果这是您将宽度扩展10％的方式：width: $.data(this,'size').width*1.1
如何将边距设置为当前高度的1/8？

我偶然发现这篇文章正在做我想做的事：https://stackoverflow.com/a/3630768/1399030（根据百分比划分和输出）

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

Answer 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])
});

<强> DEMO

注意

通过在样式表中提供过多的边界半径（例如，等于宽度），保证圆形度（？）而无需缩放。我认为这适用于所有浏览器，但需要测试。
为避免重复代码，我将缩放算法实现为自定义事件“scale”的处理程序。
保证金缩放使泡沫以其原始中心为中心。
您将在演示中看到气泡被包裹在一个静态容器中，该容器可以保留气泡可以膨胀的空间。这将阻止整个页面随着气泡的增大/缩小而需要回流。其他方法也可用，例如绝对定位。

jQuery：如何在悬停时添加转换，div的BORDER-RADIUS＆amp;余量？

1 个答案:

注意