Jquery 悬停时的边框效果

我有一个美学的功能，我正在努力创造

“look”是一个框，当框悬停在上面时，它有很多关于边框的移动。这是设计图：

我的解决方案是在（'mousemove'）上创建一个带边框的新div。新的div，

.created-x

，在

-10

和

10

之间有一个

顶部

和

左侧

位置。盒子淡入淡出，500毫秒后淡出，随后被销毁

到那里没关系

下面是一个JSFIDLE：

但我有以下问题：

1.当光标静止在框上时，

mousemove

不会触发。我需要它在光标位于框上方时保持触发，而不管移动如何。 我触发的效果如下：

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

当鼠标悬停在div上方时，如何触发此触发器

2.盒子太多了 因为它在每个mousemove上生成，所以它为每个移动的像素创建了一个带边框的框。显然，这太过分了。在上图中，您可以看到最多只有6个箱子。我的要重得多

---

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

您必须使用mouseenter。

---

检查此示例：

您必须使用mouseenter。 检查此示例：

$（函数（）{
var计数器=0；
var-myinterval=0；
无功电流；
功能盒（$this）{
var randomTop=Math.floor（Math.random（）*21）-10；
randomTop=randomTop+‘px’；
var randomLeft=Math.floor（Math.random（）*21）-10；
randomLeft=randomLeft+‘px’；
//创建唯一id
计数器++；
var current=“已创建-”+计数器；
//创建div（最多十个）
$this.追加（“”）；
$（'#'+当前）.fadeIn（'fast'）；
//在设定的时间后销毁div
setTimeout（函数（）{
//毁灭
$（'#'+当前）.fadeOut（'fast'）；
$（'#'+当前）.remove（）；
}, 500);
}
$（.box.inner”）.on（“mouseenter”，函数（）{
var$this=$（this）；
clearInterval（myinterval）；
myinterval=setInterval（函数（）{
_盒子（这个）
}, 100);
}).on（'mouseleave'，函数（）{
clearInterval（myinterval）；
});
});

$（函数（）{
var计数器=0；
var-myinterval=0；
无功电流；
功能盒（$this）{
var randomTop=Math.floor（Math.random（）*21）-10；
randomTop=randomTop+‘px’；
var randomLeft=Math.floor（Math.random（）*21）-10；
randomLeft=randomLeft+‘px’；
//创建唯一id
计数器++；
var current=“已创建-”+计数器；
//创建div（最多十个）
$this.追加（“”）；
$（'#'+当前）.fadeIn（'fast'）；
//在设定的时间后销毁div
setTimeout（函数（）{
//毁灭
$（'#'+当前）.fadeOut（'fast'）；
$（'#'+当前）.remove（）；
}, 500);
}
$（.box.inner”）.on（“mouseenter”，函数（）{
var$this=$（this）；
clearInterval（myinterval）；
myinterval=setInterval（函数（）{
_盒子（这个）
}, 100);
}).on（'mouseleave'，函数（）{
clearInterval（myinterval）；
});
});

我将改变您使用

mouseenter

和

mouseleave

的方法。然后，当光标位于框上时，设置一个添加边框的间隔。清除光标离开时的间隔。这既可以在不移动光标的情况下创建边框，也可以根据设置边框创建间隔的方式控制显示多少边框框

---

我将改变您使用

mouseenter

和

mouseleave

的方法。然后，当光标位于框上时，设置一个添加边框的间隔。清除光标离开时的间隔。这既可以在不移动光标的情况下创建边框，也可以根据设置边框创建间隔的方式控制显示多少边框框

我的解决方案最终与/非常相似。但我尽量少做改动，多做解释

问题是，当鼠标悬停在一个框上时，效果应该独立于

mousemove

执行。因此，我没有将效果代码放在

mousemove

上，而是将其放在

mouseenter

内的

setInterval

上。确保

setInterval

中的代码由于作用域更改而无法直接访问

mouseenter

的

此

，因此需要一个辅助变量来工作（由于关闭）

此外，当用户离开框时，效果应该停止。因此，在

mouseleave

上，我们应该

clearInterval

。但是，有时，事件不会正确发生：它可能恰好在一个没有

mouseleave

的框中有两个

mouseenter

，从而导致无限的运行效果。为了解决这个问题，我们还应该在调用下一个

setInterval

之前

clearInterval

，因此我们保证旧的不会永远运行

最后，要指定效果有多少边框，可以在变量中存储一个配置值（比如，

6

），我们称之为

maxBorderCount

。然后，您可以使用

setInterval

上设置的间隔。如果每

100

毫秒创建一个边框，并在

500

毫秒后将其淡入淡出，则最多显示

5

实心边框。换句话说，如果您每隔

100

毫秒创建一个边框，并在

100*maxBorderCount

之后将其淡入淡出，您将获得一个最大值

$(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);
    });

});

$(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);
    });
});