html图片细节放大代码,jsp页面实现点击图片放大查看细节

方法一：最简单直接的方式 直接放大img标签的长和宽属性：

代码：

营业执照

          

代码：

$("#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的方式控制图片鼠标上移图片放大的特殊效果，更加简洁比方法一效果更棒！

图片来源：

税务登记证

        

        

css特效：

.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的宽度也设置就好了！！