方法一:最简单直接的方式 直接放大img标签的长和宽属性:
<html>代码:
<tr ><td style="height:12px; padding-top: 0px; width:100px" ><span style="font-size:12px" ><b>营业执照
</b></span></td>
<td style="height:12px; padding-top: 0px; width:300px">
<img style=border:0;margin-top:0px; src="${enter.licenceImage}" id="file2img" width="100" height="100" />
</td></tr>
<js>代码:
$("#file2img").bind("click",function(){
var width = $(this).width();
if(width==100)
{
$(this).width(300);
$(this).height(300);
}
else
{
$(this).width(100);
$(this).height(100);
}
});
方法二:用css的方式控制图片鼠标上移图片放大的特殊效果,更加简洁比方法一效果更棒!
图片来源:
<body>
<tr ><td style="height:12px; padding-top: 0px; width:100px" ><span style="font-size:12px" ><b>税务登记证
</b></span></td>
<td style="height:12px; padding-top: 0px; width:100px" >
<div class="content1">
<img src="${enter.taxImage}" class="img_1" id="file3img" width="100px" height="100px" >
<img src="${enter.taxImage}" class="img_2" >
</div>
</td></tr>
</body>
css特效:
<style>
.content1{position:relative; width:100px;}
.img_1{display:block;}
.img_2{width:400px;position:fixed;top:70px;left:210px;display:none;}
.content1:hover img{display: block;}
此种方法遇到一点小问题,就是鼠标应该滑到小图上就放大,但实际操作中发现还不到小图大图就hover出来了,然后发现是hover的父级元素.content1的width宽度超过了小图片的宽度导致的,然后 width的宽度也设置就好了!!
</style>