html鼠标悬停左侧缩小图片放大到右边

html鼠标悬停左侧缩小图片放大到右边

首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。

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)

})

})

<img src="1.jpg" width=50 height=40 onMouseover="this.width=80this.height=60" onMouseout="this.width=50this.height=40">

<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>

---