导航:首页 > 动漫图片 > js点击图片放大效果怎么做

js点击图片放大效果怎么做

发布时间:2024-12-30 10:29:40

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS特效学院|JsWeb8.cn|---简单的图片放大展示效果</title>
<style type="text/css">
.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
.spic a:hover{font-size:9px;}
.spic a:hover img{-moz-opacity:0.5; filter: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>

阅读全文

与js点击图片放大效果怎么做相关的资料

热点内容
留胡子的男生图片 浏览:69
设计师外套衣服手绘图片 浏览:59
黑白唯美图片女生 浏览:457
盘发发型图片2014 浏览:38
知识网络图怎么画图片 浏览:5
ask怎么开图片 浏览:595
美女紧身显深沟图片 浏览:605
女生穿透明c字库图片 浏览:805
word文档的图片怎么变成圆形 浏览:139
卡通红衣服红袜子新年图片 浏览:851
女孩子阴影的图片下面的 浏览:874
在word中如何提取图片文字 浏览:267
蝴蝶简单卡通图片 浏览:59
动漫面具脸图片大全 浏览:56
如何将word图片设置无法复制 浏览:45
核酸检测阳性报告图片高清 浏览:671
男生的帅的图片微信 浏览:245
男生抱东西高清图片 浏览:768
高清彩票店图片 浏览:940
word文档里面插入图片如何旋转 浏览:241