你好,也许是一个愚蠢的问题,但我似乎找不到一个简单的解决方案。
我的练习的意思是在我的网站上放置 3 个缩略图,但是当我移动图像时,它们需要扩展大小(所以我有图片的缩略图版本和正常大小(。正常尺寸的图片必须在
<p id="groot"></p>
这确实可以正常工作,唯一的问题是当我移动到它上面时,图片不断显示。因此,当我移出缩略图时,图片需要消失。是否有功能或东西可以使站点达到原始状态或任何解决方案?提前谢谢。我希望我解释清楚了。
这是我关于stackoverflow的第一个问题,所以如果你有一个完整的菜鸟的技巧:)
这是我的 HTML 代码的正文:
<body>
<p><img id="foto1" src="images/thumb-bones.jpg" alt="bones"/>
<img src="images/thumb-castle.jpg" alt="castle"/>
<img src="images/thumb-mentalist.jpg" alt="mentalist"/>
</p>
<p id="groot"></p>
</body>
这是JS代码:
addEventListener("load", init, false);
function init() {
let foto1 = document.getElementsByTagName("img")[0].addEventListener("mouseover", actie, false);
let foto2 = document.getElementsByTagName("img")[1].addEventListener("mouseover", actie2, false);
let foto3 = document.getElementsByTagName("img")[2].addEventListener("mouseover", actie3, false);
foto1.addEventListener("click", uit, false);
}
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-bones.jpg';
plaats.appendChild(element);
}
function actie2(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-castle.jpg';
plaats.appendChild(element);
}
function actie3(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = 'images/image-mentalist.jpg';
plaats.appendChild(element);
}
使用mouseout
处理程序,并在处理程序中删除该元素中的所有子项。一种简单的方法是将""
分配给innerHTML
。例如:
function actie_off(event) {
document.getElementById("groot").innerHTML = "";
}
将其挂接到所有三个缩略图。
如果您不想使用innerHTML
,则此问题的答案提供了替代方案。
您可以考虑mouseenter
和mouseleave
,而不是mouseover
和mouseout
。这里可能没有太大区别,只是当鼠标在缩略图上移动时mouseover
重复,并且mouseout
的冒泡可能会与嵌套元素混淆(当前与您无关(。有关详细信息,请参阅链接。
要考虑的另一件事是将缩略图img
元素上的全尺寸图像 URL 存储为data-*
URI,如下所示:
<img id="foto1" src="images/thumb-bones.jpg" alt="bones" data-fullsize="images/image-bones.jpg"/>
然后,您可以对所有img
元素使用单个处理程序,而不是三个单独的处理程序:
function actie(event) {
let plaats = document.getElementById("groot");
let element = document.createElement("img");
element.src = this.getAttribute("data-fullsize"); // Getting the fullsize URL
// from the image the event
// relates to
plaats.appendChild(element);
}