[代码收集]点击旁边小图中央显示放大图 - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2013-11-16 04:46:31 -0500

★点击旁边小图中央显示放大图★

请勿抄袭本页面

代码说明

点下周围的小图，中间大图将切换成对应的图片。转自阿里西西

html代码

<style>
.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>
function seeBig(_this) {
    document.all.view_img.src=_this.parentNode.getElementsByTagName("img")[0].src;
}
</script>
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
  <td align="center"><span class="spic">
  <a onclick="seeBig(this)" style="cursor:pointer">
  <img border="0" src="http://35230.wodemo.com/entry/240115/2b3df325fbfacd46de811e68c6f27557/image-01.jpg" width="50" height="50"></a></span></td>
  <td align="center"><span class="spic">
  <a onclick="seeBig(this)" style="cursor:pointer">
  <img border="0" src="http://35230.wodemo.com/entry/240115/77aebb3bb17aba5dfe830aa7dc7e30cb/image-02.jpg" width="50" height="50"></a></span></td>
  <td align="center"><span class="spic">
  <a onclick="seeBig(this)" style="cursor:pointer">
  <img border="0" src="http://35230.wodemo.com/entry/240115/be9c5212069e6c1ad6e1a900926434bc/image-03.jpg" width="50" height="50"></a></span></td>
  <td align="center"><span class="spic">
  <a onclick="seeBig(this)" style="cursor:pointer">
  <img border="0" src="http://35230.wodemo.com/entry/240115/135af318e69a98540dfe0e7d5d5d313d/image-04.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://35230.wodemo.com/entry/240115/135af318e69a98540dfe0e7d5d5d313d/image-04.jpg"></td>
 </tr>
</table>

image-01.jpg (28.21 KiB) | Meta

image-02.jpg (12.49 KiB) | Meta

image-03.jpg (55.86 KiB) | Meta

image-04.jpg (15.7 KiB) | Meta

代码演示

[代码仅供参考，转载请注明出处]

----Comments(2)----
天蚕土豆 (@135anzhuo) | @ at 2013-11-17 11:35:
不错

万老板 (@wjt) | @ at 2013-11-16 05:56:
不错嘛

Subscribe | Register | Login | N