Question

我正在努力创造一种美学功能。

＆＃34;看＆＃34;是一个盒子，当盒子悬停在盒子上时，它有很多移动的边界。这是设计图：

我的解决方案是.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

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

_{我的解决方案最终与tonoslfx's / ioum's非常相似。但我试图做出更少的修改和更多的解释。}

问题是，当悬停一个框时，效果应该独立于mousemove执行。因此，我没有将效果代码放在mousemove上，而是将其放在setInterval内的mouseenter上。由于范围更改，请确保setInterval中的代码无法直接访问mouseenter的{{1}}，因此需要一个辅助变量才能工作（感谢关闭）。< / p>

此外，当用户离开盒子时，应该停止效果。因此，在this上，我们应该mouseleave。但是，有时候，事件没有正确发生：它可能恰好在没有clearInterval的框中有两个mouseenter，导致无限的运行效果。要解决此问题，我们还应在mouseleave之前调用clearInterval，因此我们保证旧版本不会永远运行。

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

请参阅working fiddle：

maxBorderCount

Answer 3

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

Example

Answer 4

你必须使用mouseenter。请查看此示例：https://api.jquery.com/mouseenter/

悬停

1。当光标在框上静止时，mousemove不会触发。我需要它在光标在盒子上时保持触发，无论移动。

2。箱子太多了

4 个答案:

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