導航:首頁 > 動漫圖片 > 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點擊圖片放大效果怎麼做相關的資料

熱點內容
女生給你發雲彩的圖片怎麼回復 瀏覽:641
深色馬丁靴搭配女生圖片 瀏覽:159
千里江山圖全景高清圖片 瀏覽:312
小丑笑臉圖片女生唯美 瀏覽:186
鯽魚狼尾發型圖片女 瀏覽:161
如何將圖片修改為3k還顯示清楚 瀏覽:50
男生抱花圖片帥氣頭像 瀏覽:195
修道動漫男生圖片 瀏覽:410
word怎麼摳出自己想要的圖片 瀏覽:562
日本動漫學生圖片大全 瀏覽:18
廣東男生平均臉型圖片下載 瀏覽:559
word2003圖片四角怎麼變成弧形 瀏覽:234
咬你文字圖片 瀏覽:354
戴口罩帥氣男生圖片真實 瀏覽:894
圖片已經排序好如何改前綴 瀏覽:316
圖片與文字弄在一起 瀏覽:515
史努比日歷圖片高清 瀏覽:778
簡單的短裙圖片 瀏覽:722
怎樣把圖片二維碼變成word文檔 瀏覽:267
發型男的短發發型圖片大全圖片 瀏覽:191