大家好,我的任务是为我们的网站构建一个 slider 。这是我的目标:
<div id="abc">
<div id="slider">...</div>
</div>
当一个按钮悬停在上方时,我需要将“ slider ”向左移动 30 像素,当另一个按钮悬停在上方时,需要向右移动 30 像素。
我的问题是,似乎没有可靠的方法来告诉代码鼠标尚未离开有问题的区域,除非有一些我尚未考虑或阅读过的内容。换句话说,当鼠标悬停在按钮上时,将执行向左移动“ slider ”的代码,直到调用 mouseout 为止。我不太确定该怎么做。
我能想到的唯一方法是查看 offsetTop 和 offsetLeft 和 offsetTop DOM 属性并将它们与鼠标位置进行比较,然后运行检查以查看鼠标是否在框,如果没有,它将停止代码的执行。
有更好的方法吗?
最佳答案
这相当简单。
var timerID;
$("#left").hover(function() {
timerID = setInterval(slideLeft, 1000);
}, function() {
clearInterval(timerID);
});
function slideLeft() {
$("#slider").animate({left: -30});
}
右侧类似。
如果在鼠标离开该区域时需要停止某些内容,则只需使用 hover()
即可。否则,您可以简单地使用 mouseover()
事件。
注意:我放在那里的实际效果可能不正确,但它完全取决于您正在使用的 slider 插件。根据需要进行调整。
关于jQuery 并执行代码直到调用 mouseout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2830947/