悬停时的边框效果

Question

我正在尝试创建一个美观的功能。

“外观”是一个框，当框悬停在框上时，它的边界有很多移动。这是设计图：

我的解决方案是 .on('mousemove') 创建一个带边框的新 div。新的 div、.created-x 有一个 top 和 left 位置随机位于 -10 和 10 之间。盒子淡入，500 毫秒后淡出并随后销毁。

那里 OK/getting。

这是一个 JSFiddle：https://jsfiddle.net/adgndLqe/13/

但我遇到了以下问题：

1。当光标在框上静止时，`mousemove` 不会触发。我需要它在光标位于框上方时保持触发，无论移动如何。

我是这样触发效果的：

$(".box .inner").on("mousemove", function () {

当鼠标悬停在 div 上时如何触发此事件？

2。箱子太多

因为它在每次移动鼠标时生成，所以它会为移动的每个像素创建一个带边框的框。显然这是矫枉过正。在上图中，您可以看到最多只有大约 6 个框。我的重很多。

如何减少创建的方框数量，使其不会在移动每个像素时触发，而是说，每移动 3 或 5 个像素以减少方框数量？

Answer 1

你必须使用鼠标输入。检查这个例子：https://api.jquery.com/mouseenter/

Answer 2

$(function () {
    var counter = 0;
    var myinterval = 0;
    var current;

    function _boxes($this) {

        var randomTop = Math.floor(Math.random() * 21) - 10;
        randomTop = randomTop + 'px';

        var randomLeft = Math.floor(Math.random() * 21) - 10;
        randomLeft = randomLeft + 'px';

        // Create unique id
        counter++;
        var current = "created-" + counter;

        // Create the div (max of ten)
        $this.append("<div id='" + current + "' style='display:none;border:1px solid #fff;width:100%;min-height:170px;position:absolute;top:" + randomTop + ";left:" + randomLeft + ";'></div>");
        $('#' + current).fadeIn('fast');

        // Destroy the div after a set time
        setTimeout(function () {
            // destroy
            $('#' + current).fadeOut('fast');
            $('#' + current).remove();

        }, 500);

    }

    $(".box .inner").on("mouseenter", function () {

        var $this = $(this);

        clearInterval(myinterval);

        myinterval = setInterval(function () {
            _boxes($this)
        }, 100);

    }).on('mouseleave', function () {
        clearInterval(myinterval);
    });

});

Answer 3

我会改变您使用 mouseenter 和 mouseleave 的方法。然后，当光标位于一个框上方时，设置一个添加边框的间隔。清除光标离开时的间隔。这既可以在光标不移动的情况下创建边框，也可以根据您设置边框创建间隔的方式来控制显示的边框数量。

Example

Answer 4

_{我的解决方案最终与 / 非常相似。但是我尽量少改，多解释。}

问题是效果应该独立于 mousemove 执行，同时将鼠标悬停在一个框上。因此，我没有将效果代码放在 mousemove 上，而是将它放在 mouseenter 内的 setInterval 上。确保 setInterval 中的代码由于作用域的变化不能直接访问 mouseenter 的 this，所以需要一个辅助变量来工作（感谢闭包）。

此外，当用户离开盒子时，效果应该停止。所以，在mouseleave，我们应该clearInterval。但是，有时事件不会正常发生：它可能恰好在一个没有 mouseleave 的盒子中有两个 mouseenter，从而导致无限运行ning 效果。为了解决这个问题，我们还应该在调用下一个 setInterval 之前 clearInterval，这样我们保证旧的不会永远运行。

最后，要指定效果有多少边框，您可以配置一个值 - 比方说，6 - 存储在一个变量中 - 我们称之为 maxBorderCount。然后，您可以使用 setInterval 上设置的间隔。如果您每隔 100 毫秒创建一个边框，并在 500 毫秒后将其淡化，那么您将拥有最多 5 solid 边框被显示。换句话说，如果您每隔 100 毫秒创建一个边框，并在 100 * maxBorderCount 之后淡化它们，您将拥有最多 maxBorderCount solid 显示边框。

请参阅 working fiddle:

$(document).ready(function () {
    var counter = 0;
    var maxBorderCount = 6;
    var borderInterval = undefined;
    $(".box .inner").on("mouseenter", function () {
        clearInterval(borderInterval);
        var superThis = this;
        borderInterval = setInterval(function() {
            // Generate top and left position;
            var randomTop = Math.floor(Math.random() * 21) - 10;
            randomTop = randomTop + 'px';

            var randomLeft = Math.floor(Math.random() * 21) - 10;
            randomLeft = randomLeft + 'px';

            // Create unique id
            counter++;
            var current = "created-" + counter;

            // Create the div (max of ten)
            $(superThis).append("<div id='" + current + "' style='display:none;border:1px solid #fff;width:100%;min-height:170px;position:absolute;top:" + randomTop + ";left:" + randomLeft + ";'></div>");
            $('#' + current).fadeIn('fast');

            // Destroy the div after a set time
            setTimeout(function () {
                // destroy
                $('#' + current).fadeOut('fast');
                $('#' + current).remove();
            }, 100 * maxBorderCount);
        }, 100);
    }).on("mouseleave", function() {
        clearInterval(borderInterval);
    });
});

悬停时的边框效果

Bordered box effect on hover

jquery

mouseover

mouseout

mousemove

1。当光标在框上静止时，`mousemove` 不会触发。我需要它在光标位于框上方时保持触发，无论移动如何。

2。箱子太多

悬停时的边框效果

Bordered box effect on hover

jquery

mouseover

mouseout

mousemove

1。当光标在框上静止时，mousemove 不会触发。我需要它在光标位于框上方时保持触发，无论移动如何。

2。箱子太多

1。当光标在框上静止时，`mousemove` 不会触发。我需要它在光标位于框上方时保持触发，无论移动如何。