我正在尝试创建美观的功能。
“外观”是一个框，当框悬停在框上时，边框周围会有很多移动。这是设计图形：
我所拥有的解决方案是创建一个带有边框的新div .on('mousemove')。新的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个像素以减少框数？
最佳答案
我的解决方案最终与tonoslfx's / ioum's非常相似。但是我试图做出更少的改变，更多的解释。
问题在于，悬停一个框时，效果应独立于mousemove执行。因此，不是将效果代码放置在mousemove上，而是将其放置在setInterval内的mouseenter上。确保由于范围的变化，setInterval中的代码不能直接访问mouseenter的this，因此需要一个辅助变量来工作（由于闭包）。
此外，当用户离开盒子时，效果应停止。因此，在mouseleave上，我们应该clearInterval。但是，有时，事件无法正确发生：它可能恰好在一个盒子中有两个mouseenter而没有mouseleave，从而导致无限的运行效果。为了解决这个问题，我们也应该在调用下一个clearInterval之前先setInterval，这样我们保证旧的将永远不会运行。
最后，要指定效果有多少个边界，您可以有一个配置的值-假设6-存储在变量中-称为maxBorderCount。然后，您可以使用在setInterval上设置的间隔。如果您每隔100毫秒创建一个边框，并在500毫秒后将其淡入淡出，则最多将显示5个实线边框。换句话说，如果您每隔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);
});
});
关于jquery - 带边框的框悬停效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30669723/