0

我有一个图像库，可以内联显示所有图像，并且目标图像在页面的其他位置显示得更大。我想解决的问题是使目标图像更大，而不是将其从图库流程中删除。

<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>

小提琴：http: //jsfiddle.net/GxxV5/

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

理想情况下有一个 html/css 解决方案？我可以使用 javascript 解决方案，但请不要使用 jquery。在继续学习 jquery 之前，我仍在学习 javascript。

4

2 回答 2

1

这是一个工作示例：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/

于 2013-07-23T01:42:49.333 回答
0

我只是在您的示例中添加了一个基本的 javascript 函数，例如：

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}

你可以在这个JSFiddle看到完整的变化。请帮我添加一些 CSS 来美化它，;)

于 2013-07-23T02:22:31.160 回答