目标类名,但使用唯一ID调用函数
Target class name but call function on unique ID
好的,我将在我以前见过的最慢的ASP盒子上运行这个,所以我不想使用jQuery,我知道它会让一切变得更容易,但我需要尽可能地保持我的代码的小 我的目标用户是我见过的互联网速度最慢的用户,加载整个jQuery文件对他们的互联网来说太难了。所以我不想在这个脚本中使用jQuery。
我正在尝试制作一个脚本,当用户悬停在缩略图上时,会弹出更大的图像。我使用以下javascript来实现这一点:
var hoverImage = document.getElementById("largeImage");
function hoverZoom(selector) {
this.node = document.querySelector(selector);
if(this.node === null) {
console.log("Node not found");
}
return this.node.id;
}
hoverZoom.prototype.show = function(x, y) {
var largeImageSrc = this.node.name;
hoverImage.style.display = "block";
var largeWidth = hoverImage.offsetWidth;
var largeHeight = hoverImage.offsetHeight;
hoverImage.style.top = y - (largeHeight / 2) + "px";
hoverImage.style.left = x - (largeWidth / 2) + "px";
hoverImage.style.position = "absolute";
hoverImage.style.background = "url(" + largeImageSrc + ")";
}
hoverZoom.prototype.hide = function() {
hoverImage.style.display = "none";
}
hoverZoom.prototype.checkCoords = function(x, y) {
var id = document.getElementById(this.node.id);
var elemTop = id.offsetTop;
var elemLeft = id.offsetLeft;
var elemHeight = id.offsetHeight;
var elemWidth = id.offsetWidth;
console.log(x + " " + y + " " + this.node.id + " " + id + " " + elemHeight + " " + elemWidth + " " + elemTop + " " + elemLeft);
if(x >= elemLeft && x <= elemLeft + elemWidth && y >= elemTop && y <= elemTop + elemHeight) {
return true;
}
}
document.body.onmousemove = function(e) {
e = e || window.event;
while(hoverZoomPI.checkCoords(e.clientX, e.clientY) === true) {
var target = e.target || e.srcElement,
offsetX = e.clientX,
offsetY = e.clientY;
return hoverZoomPI.show(offsetX, offsetY);
}
hoverZoomPI.hide();
}
var hoverZoomPI = new hoverZoom(".test");
我的问题是,当我将鼠标悬停在另一个具有相同类名的图像上时,什么都不会发生。但是,当我将鼠标悬停在具有类名的第一个图像上时,它就起作用了。
我用我所有的代码和一个例子建立了一个jsFiddle:http://jsfiddle.net/f7xqF/
感谢大家的帮助。在过去的几年里,你们帮了我多少忙,我说得再多也不为过。
应该使用document.querySelectorAll
而不是document.querySelector
来获取所有节点的LIST,而不仅仅是第一个节点。之后,u当然应该将回调附加到所有收集的元素。
相关文章:
- 正在为循环创建唯一id
- 在JavaScript中创建全局唯一ID
- 为dropdownlistfor(MVC)中的每个元素设置唯一id
- 向具有唯一Id的表添加/删除行
- 基于唯一ID合并geojson
- 如何为使用 jQuery 动态生成的按钮提供唯一 ID
- 类似系统:循环形成唯一id,得到这些id'使用jQuery/Javascript单独发布
- Knockout.js中使用的唯一ID;对于“;单选按钮组中的标签属性
- 在所有页面中搜索<身体>具有唯一ID
- 如何从多个唯一id中获取值
- 为客户端和服务器上的对象生成唯一 ID
- 如何使用jQuery创建具有唯一ID的可重复表
- 在 Firebase 中通过对象的唯一 id 查找对象
- 如何将唯一 ID 添加到 Javascript 中动态创建的输入字段
- 页面上第二个表单所需的唯一 id 属性
- 克隆并附加唯一 ID 后找不到 DOM 元素
- 如何在 append() 上添加具有唯一 id 的编辑按钮
- Chrome 标签页的永久唯一 ID,在浏览器会话之间持续存在
- 跨多个客户端和服务器生成真正的全局唯一 ID
- 如何通过 php 中的唯一 ID 删除 Json