首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。
2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置，他的放大会是向一边的，因此我们必须考虑其放大后的位置。
3，放大的效果是要用动画实现的。
代码：html>
尝试
.a1{width:137pxheight:138pxborder:1px solid redoverflow:hiddenposition:relative}
.pic{position:absolute}
$(function(){
$w = $('.pic').width()
$h = $('.pic').height()
$w2 = $w + 20
$h2 = $h + 20
$('.pic').hover(function(){
$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500)
},function(){
$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500)
})
})
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
<style>.demo{ width:1000px height:100px position:relative}
.demo div{ position:absolute}
.demo .imgA{ z-index:11}
.demo .imgB{ z-index:10}
.demo .imgA:hover+.imgB{z-index:12}
.demo .imgB:hover{z-index:12}
.imgB:hover{
-webkit-transition: 0.6s
-moz-transition:0.6s
-o-transition:0.6s
-ms-transition:0.6s
transition:0.6s
webkit-transform:scale(1.5,1.5)
-moz-transform:scale(1.5,1.5)
-o-transform: scale(1.5,1.5)
-ms-transform:scale(1.5,1.5)
transform:scale(1.5,1.5)}
</style>
<div class="demo">
<div class="imgA"><img src="A.jpg"/></div>
<div class="imgB"><img src="B.jpg"/></div>
</div>
