gpt4 book ai didi

javascript - 图库中的重复图像

转载 作者:太空宇宙 更新时间:2023-11-04 14:46:43 25 4
gpt4 key购买 nike

我有一个内联显示所有图像的图片库,目标图像在页面的其他地方显示得更大。我想解决的问题是使目标图像变大,而不是将其从图库流中删除。

<div class="gallery">
<a href="#1"><img id="1" src="http://placehold.it/100" /></a>
<a href="#2"><img id="2" src="http://placehold.it/200" /></a>
<a href="#3"><img id="3" src="http://placehold.it/300" /></a>
<a href="#4"><img id="4" src="http://placehold.it/400" /></a>
</div>

fiddle :http://jsfiddle.net/GxxV5/

即,当图片 200 显示得更大时,我希望它也保留在顶部画廊 View 中,而不是仅仅移动到页面底部。

理想情况下有 html/css 解决方案吗?我可以使用 javascript 解决方案,但请不要使用 jquery。在我转向 jquery 之前,我仍在学习 javascript。

最佳答案

这是一个工作示例: http://jsfiddle.net/Stijntjhe/xxBEd/

JavaScript 不多,把它放在你的 <head> 里:

function show(img) {
document.getElementById('big').innerHTML = '<img src="' + img.src + '" />';
}

并添加一个简单的 onclick到你的图片:

<img id="2" onclick="show(this);" src="http://placehold.it/200" />

不要忘记额外的 <div>在您的 HTML 中:

<div id="big"></div>

编辑:

即使没有 JavaScript 也可以,但您需要一些额外的 HTML: http://jsfiddle.net/Stijntjhe/xxBEd/5/

关于javascript - 图库中的重复图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17799984/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com