[英]How can I stop a jQuery function on hover and start on mouse leave
我有一个在mousemove事件上运行的jQuery函数。 实际上,我必须将图像分开,一个是主图像,另一个是阴影图像。 我正在使用mousemove事件来反映阴影图像。 一切正常,但是当我将鼠标悬停在主图像上时,我想停止mousemove事件。 当我从图像上释放鼠标时,它将再次运行。 我该怎么办。 这是链接-http://zakirinfo.com/mouse/
的HTML
<div style="width:100%">
<img id="shadow-img" style="position:absolute;"src="./assets/img/slsshadow.jpg"></img>
<img id="center-img" style="position:absolute;left:50%;top:50%;margin-left:-204px;margin-top:-204px" src="./assets/img/slslogo.jpg"></img>
</div>
jQuery的
(function() {
var shadowImg = document.getElementById('shadow-img');
var centerImg = document.getElementById('center-img');
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var center = {
x : centerImg.getBoundingClientRect().left + 204,
y : centerImg.getBoundingClientRect().top
};
console.log(center);
var shadowPos = {
x : (1.8 * center.x) - event.pageX,
y : (2.2 * center.y) - event.pageY,
};
shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
};
})();
这是工作代码(如果我理解正确的话):
(function() {
var shadowImg = document.getElementById('shadow-img');
var centerImg = document.getElementById('center-img');
document.addEventListener("mousemove", handleMouseMove);
centerImg.addEventListener("mouseenter", function() {
document.removeEventListener("mousemove", handleMouseMove);
});
centerImg.addEventListener("mouseleave", function() {
document.addEventListener("mousemove", handleMouseMove);
});
function handleMouseMove(event) {
var center = {
x : centerImg.getBoundingClientRect().left + 204,
y : centerImg.getBoundingClientRect().top
};
console.log(center);
var shadowPos = {
x : (1.8 * center.x) - event.pageX,
y : (2.2 * center.y) - event.pageY,
};
shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
};
})();
HTML不变。 另外这里是一个jsfiddle: http : //jsfiddle.net/wbkdrdpk/2/
说明:
首先,我使用addEventListener分配事件。
document.addEventListener("mousemove", handleMouseMove);
这和您的代码行几乎一样,但是它的优点是可以调用removeEventListener
函数来删除处理程序。
现在,我向图像添加了两个事件侦听器,以删除并重新添加移动处理程序:
centerImg.addEventListener("mouseenter", function() {
document.removeEventListener("mousemove", handleMouseMove);
});
centerImg.addEventListener("mouseleave", function() {
document.addEventListener("mousemove", handleMouseMove);
});
很简单的东西。
编辑:我删除了所有的jquery代码,因为即使您用“ jquery”标记了问题,您实际上并没有使用jquery。 我也删除了该标签,因为它具有误导性;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.