将鼠标悬停在 div 上时正在绘制一个圆圈答案

【问题标题】：A circle being drawn when hover over div将鼠标悬停在 div 上时正在绘制一个圆圈
【发布时间】：2014-11-11 02:22:20
【问题描述】：

我一直在寻找这个问题，我找到了一些答案，但这并不是我真正需要的。

我对 jquery 不是很熟悉，但我已经做了悬停功能！当我将鼠标悬停在 div 上时，它会调整大小。我想为这个效果添加的是：在同一个悬停时，会在图像周围画一个圆圈。

我已经看到人们添加框半径的答案。但我正在寻找的是您实际上看到了正在绘制的圆圈。 0:49 秒的示例（有点随机，但此视频显示了我需要的效果）：

http://www.youtube.com/watch?feature=player_detailpage&v=jCdNnaTzItM#t=45s

我希望这是可能的！

我的代码：

$('li#balk1').hover(
    function(){ $(".ad").css('transform', 'scale(1.2)'); },
    function(){ $(".ad").css('transform', 'scale(1)'); } 
);

“.ad”周围应该有一个圆圈

【问题讨论】：

你不能在 HTML 中真正做这种事情，这不是 DOM 的工作方式。你会更轻松地在一个圈子里消失。
感谢您的评论，我想我只是将其作为临时解决方案。我已经看到用 jquery 完成了一些非常疯狂的事情：p
jQuery 并不“疯狂”，也不是魔法。它只是以比直接访问 DOM API 稍微更理智的方式操作 DOM 元素。它不能用来画任意的东西。如果你正在寻找绘制的东西，jQuery 不会有用的。
是的，没错。我认为它不应该被“绘制”，那么填充一条线呢？ buildinternet.com/2009/06/animate-image-filling-up-using-jquery
我认为这是可能的，您只需要构建某种解决方法并开箱即用。我会怎么做：将画布添加到 dom 位置：绝对（或相对，取决于您的结构），将宽度设置为 $('li#balk1').outerWidth() + 20，高度设置为 $('li#balk1 ').outerHeight() + 20，按预期设置 left 和 top。现在，您可以构建一个小函数来在此画布内绘制一个矩形或循环，并使用预期的测量值和颜色。不要忘记处理鼠标进入画布并在显示画布后立即离开元素。

标签： jquery css hover geometry

【解决方案1】：

好吧，事实证明你可以做到这一点，我抛出了一个 fiddle 修改 this 解决方案。我相信它依赖于 tween 和 curve 插件的使用，在第二个链接中有更详细的解释。

【讨论】：

【解决方案2】：

查看此Codepen (link) 或者也可以作为gist (link) 使用

使用 SVG 笔触属性，我们为使用 rand 计算的不完美贝塞尔曲线生成的 SVG 线条制作动画。我认为这应该非常接近您正在寻找的内容。

jQuery 和 D3 依赖项

<style>
path.ln {
    stroke-width: 2px;
    stroke: #999;
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-animation: dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    -moz-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    -o-animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
    animation:dash 4s cubic-bezier(0.45,0.3,0.35,0.3);
}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}
</style>

<script>
function path(min_rad_delta,max_rad_delta, el_min, el_max, el_min_delta,el_max_delta) {
    var d = Math.sqrt( 0.5 * 0.5 + 1 * 1 ), r = 1; //returns the square root of a number
    var el = (el_min + Math.random() * (el_max - el_min)) * Math.PI / 180;
    var path = 'M' + [r * Math.sin(el), r * Math.cos(el)] + ' C' + [d * r * Math.sin(el + Math.LN2), d * r * Math.cos(el + Math.LOG10E)];

    for (var i = 0; i < 4; i++) {
        el += Math.PI / 2 * (1 + el_min_delta + Math.random() * (el_max_delta - el_min_delta));
        r *= (1 + min_rad_delta + Math.random()*(max_rad_delta - min_rad_delta));
        path += ' ' + (i?'S':'') + [d * r * Math.sin(el - 0.45), d * r * Math.cos(el - 0.45)];
        path += ' ' + [r * Math.sin(el), r * Math.cos(el)];
    }
    return path;
}

function cX(lambda_min, lambda_max, el_min, el_max) {
    var el = (el_min + Math.random()*(el_max - el_min));
    return 'rotate(' + el + ') ' + 'scale(1, ' + (lambda_min + Math.random()*(lambda_max - lambda_min)) + ')'+ 'rotate(' + (-el) + ')';
}
</script>

<svg id="circle" width="50%" height="75%" viewBox='-1.5 -1.5 3 3'></svg>

<script>
d3.selectAll( 'svg' )
    .append( 'path' )
    .classed( 'ln', true)
    .attr( 'd', path(-0.1,0, 0,360, 0,0.2 ))
    .attr( 'transform', cX( 0.6, 0.8, 0, 360 ));
setTimeout(function() { location = '' } ,5000)
</script>

【讨论】：