设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 图形图像 > 详细内容
简单的图片放大展示效果
发布时间:2010-3-15  阅读次数:8440  字体大小: 【】 【】【

很简单的效果,很简单的代码,但是可以用在很多地方,点击图片放大展示


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|jscode.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(thispic) {
   if(thispic==1){
       document.all.viewPic.innerHTML='<img border=0 src=http://www.jscode.cn/jscode/images/test001.jpg>'
   }
   if(thispic==2){
       document.all.viewPic.innerHTML='<img border=0 src=http://www.jscode.cn/jscode/images/test002.jpg>'
   }
   if(thispic==3){
       document.all.viewPic.innerHTML='<img border=0 src=http://www.jscode.cn/jscode/images/test003.jpg>'
   }
   if(thispic==4){
       document.all.viewPic.innerHTML='<img border=0 src=http://www.jscode.cn/jscode/images/test004.jpg>'
   }
}
</script>
</head>

<body>

<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td align="center"><span class="spic">
    <a href="javascript:seeBig(1)" style="cursor:pointer">
    <img border="0" src="http://www.jscode.cn/jscode/images/test001.jpg" width="50" height="50"></a></span></td>
    <td align="center"><span class="spic">
    <a href="javascript:seeBig(2)" style="cursor:pointer">
    <img border="0" src="http://www.jscode.cn/jscode/images/test002.jpg" width="50" height="50"></a></span></td>
    <td align="center"><span class="spic">
    <a href="javascript:seeBig(3)" style="cursor:pointer">
    <img border="0" src="http://www.jscode.cn/jscode/images/test003.jpg" width="50" height="50"></a></span></td>
    <td align="center"><span class="spic">
    <a href="javascript:seeBig(4)" style="cursor:pointer">
    <img border="0" src="http://www.jscode.cn/jscode/images/test004.jpg" width="50" height="50"></a></span></td>
  </tr>
  <tr>
    <td colspan="4" align="center" id="viewPic"><img border="0" src="http://www.jscode.cn/jscode/images/test001.jpg"></td>
  </tr>
</table>

</body>

</html>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[1]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮