javascript - 使用 javascript 操作 css 层

Question

我想知道是否有可能有一种缩略图图库，在其中单击缩略图会在图层中显示完整图像。我想知道是否可以加载所有层和相应的图像并使用 javascript 更改 z 索引或类似的东西以避免必须重新加载或离开页面。我宁愿避免使用服务器端技术，但不知道这是否可行。

编辑:

我不追求“灯箱”解决方案或覆盖页面的任何东西，我更希望图像作为页面的一部分出现，并且在不重新加载页面的情况下进行更改，基本上就像下面链接的 PIctureSlide。但更重要的是，我想知道在不使用框架的情况下是否可以轻松编写它，它是否会像我上面想的那样工作？

Answer 1

是的，你可以在没有框架的情况下做到这一点:

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="document.getElementById('big').style.backgroundImage='url(Big.gif)'"><img border="0" src="images/Thumb.gif" /></a>

这是一个使用 Prototype 的简单示例图书馆:

<div id='big' style='width:500px;height:500px'></div>
<a href="javascript://load big image" onclick="$('big').style.backgroundImage='url(Big1.gif)'"><img border="0" src="thumb1.gif" /></a>

此脚本假定大图像均为 500 x 500 像素。

还有一个替代方法:

<div id='big'></div>
<a href="javascript://load big image" onclick="loadBig('Big1.gif')"><img border="0" src="thumb1.gif" /></a>
<script type="text/javascript">
function loadBig() {
    $('big').innerHTML = "<img src='Big1.gif'>"
}
</script>