【CSON原创】 纯CSS图片放大浏览效果

效果预览：

前些天无意中看到的一条阿里巴巴前端面试题,该题目如下：

当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动。

发现这种效果还是挺常用的，所以用纯css做了个类似的效果，但放大是通过设置新的宽和高而非放大百分比来实现，如果需要按题目那样通过百分比来控制放大倍数，就个人觉得就需要用js来进行动态计算，但原理是一样的。

实现原理：

由于这种图片的排列一般通过浮动来控制，所以在图片放大的时候，被放大的图片会影响到后续图片的位置。因此，我们要实现的就是在改变图片大小的同时改变图片位置。又由于图片并非绝对或相对定位，所以我觉得最适合通过margin来实现位置的调整。

实现代码：

html：

<div id="container">
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" class="obj" /></a>
</div>

css：

* { margin : 0 ; padding : 0 ; }

#container { width : 400px ; height : 400px ; }

img.obj
{
width : 100px ; height : 100px ;
float : left ; margin-left : 20px ; display : inline ;
margin-top : 20px ; opacity : 0.6 ; filter : alpha(opacity=60) ; border : 2px solid black ;
}

img.obj:hover
{
width : 200px ; height : 200px ; margin-right : -50px ; margin-left : -30px ; opacity : 0.8 ; filter : alpha(opacity=80) ;
border : 2px dotted black ; margin-top : -30px ; margin-bottom : -50px ; position : relative ;
}

代码分析：

主要分析图片放大和正常状态下的css代码就可以了：

img.obj
{
width : 100px ; height : 100px ;
float : left ; margin-left : 20px ;
margin-top : 20px ;
display : inline ;
}

撇开其它装饰性的样式，其实原状态下的图片就是普通的浮动布局，并且带有左边和上边的边距，display:inline用于消除IE6下的双倍边距bug。

图片放大后:

img.obj:hover
{
width : 200px ; height : 200px ;
margin-right : -50px ; margin-left : -30px ;
margin-top : -30px ; margin-bottom : -50px ;
position : relative ;
}

宽度差=200-100=100px，因此此时会造成后续图片的布局错乱，此时需要调整图片的边距。

图片新左边距=原左边距-宽度差=20-50=-30px

图片新右边距=-原左边距-（宽度差-原左边距）=-20-（50-20）=-50px

另外需要注意的是，元素由于设置了margin，所以后面的元素会盖在前面的元素上面，要解决这个问题，只需加上相对定位则可。

如果需要按百分比来放大图片，可以用js来实现上面的计算，再设置图片的样式。

欢迎转载，请标明出处： http://www.cnblogs.com/Cson/archive/2011/04/04/2005501.html

转载于:https://www.cnblogs.com/Cson/archive/2011/04/04/2005501.html