悬停时的边框效果

Question

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

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

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

没关系/到达那里。

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

但我遇到以下问题：

1。当光标在框上静止时，mousemove 不会触发。每当光标在框上时，我需要它继续触发，无论移动如何。

我是这样触发效果的：

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

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

2。盒子太多

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

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

Answer 1

_{我的解决方案最终与tonoslfx's / ioum's 非常相似。但我尽量少改动多解释。}

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

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

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

请看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);
    });
});

Answer 2

我会改变您使用mouseenter 和mouseleave 的方法。然后，当光标在一个框上时，设置一个添加边框的间隔。光标离开时清除间隔。即使没有移动光标，这也可以创建边框，并且根据您设置边框创建间隔的方式，控制显示的边框框数。

Example

Answer 3

$(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 4

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