点击小图看大图的js,如何点击大图，能新窗口打开原始大图

JavaScript05

点击小图看大图的js,如何点击大图，能新窗口打开原始大图,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>JS特效学院|JsWeb8.cn|---简单的图片放大展示效果</title>

<style type="text/css">

.spic a img{-moz-opacity:0.5filter:alpha(opacity=50)border:0px}

.spic a:hover{font-size:9px}

.spic a:hover img{-moz-opacity:0.5filter:alpha(opacity=100)cursor:hand}

</style>

<script type="text/javascript">

function seeBig(_this) {

OpenWindow = window.open("", "img", "")//打开新窗口

OpenWindow.document.write("<html>")//为新窗口设定html代码

OpenWindow.document.write("<head>")

OpenWindow.document.write("<title>例子</title>")

OpenWindow.document.write("</head>")

OpenWindow.document.write("<body>")

OpenWindow.document.write("<img src='" + _this.parentNode.getElementsByTagName("img")[0].src + "' alt='' /")

OpenWindow.document.write("</body>")

OpenWindow.document.write("</html>")

OpenWindow.document.close()

//注：document.write 一行只能出现一种标签

//需要 OpenWindow.document.close()

}

</script>

</head>

<body>

<table border="0" width="100%" cellspacing="3" cellpadding="3">

<tr>

<td align="center"><span class="spic">

<a href="###" onclick="seeBig(this)" style="cursor:pointer">

<img border="0" src="http://www.jsweb8.cn/images/test001.jpg" width="50" height="50"></a></span></td>

<td align="center"><span class="spic">

<a href="###" onclick="seeBig(this)" style="cursor:pointer">

<img border="0" src="http://www.jsweb8.cn/images/test002.jpg" width="50" height="50"></a></span></td>

<td align="center"><span class="spic">

<a href="###" onclick="seeBig(this)" style="cursor:pointer">

<img border="0" src="http://www.jsweb8.cn/images/test003.jpg" width="50" height="50"></a></span></td>

<td align="center"><span class="spic">

<a href="###" onclick="seeBig(this)" style="cursor:pointer">

<img border="0" src="http://www.jsweb8.cn/images/test004.jpg" width="50" height="50"></a></span></td>

</tr>

<tr>

<td colspan="4" align="center" id="viewPic"><img id="view_img" border="0" src="http://www.jsweb8.cn/images/test001.jpg"></td>

</tr>

</table>

</body>

</html>

所谓的缩略图其实就是设置了一个长宽小点的<img>去存放这张图片，在<img>的点击事件中再去更改它的长宽达到放大效果，当然这样可能会打乱页面布局，所以你可以做成像QQ空间那样，点击图片后利用遮罩层显示放大的图片。