点小图放大图的效果

以下是HTML网页特效代码，点击运行按钮可查看效果：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS特效学院|JsWeb8.cn|---简单的图片放大展示效果</title> <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> </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="/uploads/allimg/150926/141UK536-0.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="/uploads/allimg/150926/141ULB7-1.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="/uploads/allimg/150926/141ULO2-2.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="/uploads/allimg/150926/141UI413-3.jpg" width="50" height="50"></a></span></td> </tr> <tr> <td colspan="4" align="center" id="viewPic"><img id="view_img" border="0" src="/uploads/allimg/150926/141UK536-0.jpg"></td> </tr> </table> </body> </html>
[提示：可先修改代码再按运行]

点小图放大图的效果

相关文章

栏目导航

最新文章

点击排行

推荐文章

打赏