Jquery zoom with a clickable element that doesn't disrup the functionality

标签 jquery css

我正在构建一个游戏,其中有人必须使用此 JQuery 缩放插件在照片中搜索小图像:http://www.professorcloud.com/mainsite/cloud-zoom.htm

当用户找到该元素时,它需要可点击才能触发功能。一切都非常简单,只是当用户将鼠标悬停在该元素上时,它会破坏缩放功能,从而泄露游戏。谁能告诉我一种在不中断缩放流程的情况下在此缩放图像中嵌入可点击元素的方法。

我在这里整理了一个例子:

http://christophercamplin.com/zoom/

非常感谢这里的任何帮助。

最佳答案

为什么不使用类似于此的 onclick 设置。 只是不要只是射击一个盒子,而是检查它们的坐标是否在正确的区域,如果是,则执行您必须执行的操作,如果否,则什么都不做。这消除了对导致问题的标签的需要。

<html><head><script type="text/javascript">
function dog(){
alert("start");
pig.onclick=function(e){
alert(e.pageX+"dg"+e.pageY);
};
alert("done");
}
</script>
<title>your face</title>
</head>
<body onload="dog();">
<div style="display:block; width:200px; height:200px; background-color:Red;" id=pig>
</div>
</body>
</html>

关于Jquery zoom with a clickable element that doesn't disrup the functionality,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10521269/

相关文章:

javascript - 输入中的 Chrome 现金值(value)

JavaScript - 更改 CSS 颜色 5 秒

javascript - 页面滚动,保持页面垂直,部分页面水平

html - 如何将样式应用于即时标记而不是在文本之后

jquery 在页面加载时弹出

javascript - 没有鼠标事件的图像动画Jquery

jquery - 如何在 bootstrap 导航栏中保留一些元素和一些元素?

javascript - 如果加载后发生附加事件,确保在 jQuery 事件中触发加载代码

javascript - 在 iframe 中禁用视频

html - 在非 Leaflet 应用程序 (Sigma JS) 中重新创建放大/缩小按钮?