CSS实现鼠标移动图片放大效果
2010-08-12
现在在含有图片较多的页面上，我们会以缩略图的形式展示图片，当用户将鼠标移动到缩略图上时，我们就会按原图大小显示出来。这种应用已经很普遍，尤其在商品展示和用户头像场景中。
写之前发现网上的都不是很理想，兼容性一般。再看了《超越CSS》之后，觉得上面的想法不错，这次和大家分享一下。大致思路就是：通过绝对定位把缩略图图排列好，然后通过css的hover伪类属性来实现图片尺寸放大。具体如下：
demo文件下载点这里
CSS文件如下：
- <style type="text/css" title="">
- body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
- #main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
- ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/} li{display:inline;}
- li a{position:relative;}
- li a:hover{position:relative;color:#000;z-index:1000;}
- /*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/
- li a img{width:100px;height:100px;border:none;position:absolute;}
- /*使用绝对定位让图片固定，从而脱离页面流*/
- li a:hover img{
- position:absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;}
- /*注意这里的z-index显示设置，否则会有重叠*/
- li#pic-01 a img{top:0;left:0;}
- li#pic-02 a img{top:0;left:100px;}
- li#pic-03 a img{top:0;left:200px;}
- li#pic-04 a img{top:100px;left:0;}
- li#pic-05 a img{top:100px;left:100px;}
- li#pic-06 a img{top:100px;left:200px;}
- li#pic-07 a img{top:200px;left:0px;}
- li#pic-08 a img{top:200px;left:100px;}
- li#pic-09 a img{top:200px;left:200px;}/*定位图片的排布*/
- </style>
Html文件如下：
- <div id="main-content">
- <ul>
- <li id="pic-01"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/01.jpg" alt="" /></a></li>
- <li id="pic-02"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/02.jpg" alt="" /></a></li>
- <li id="pic-03"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/03.jpg" alt="" /></a></li>
- <li id="pic-04"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/04.jpg" alt="" /></a></li>
- <li id="pic-05"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/05.jpg" alt="" /></a></li>
- <li id="pic-06"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/06.jpg" alt="" /></a></li>
- <li id="pic-07"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/07.jpg" alt="" /></a></li>
- <li id="pic-08"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/08.jpg" alt="" /></a></li>
- <li id="pic-09"><a href="#"><img src="http://ued.alipay.com/wp-content/uploads/2008/10/09.jpg" alt="" /></a></li>
- </ul>
- </div>
鼠标移上去之后实现了图片放大，其中要注意的是IE6的hover属性，
IE6处理CSS伪类:hover存在一个Bug.就是一旦 a与 a:hover 的CSS属性是一样的，也就是说a:hover中没有任何样式的改变，hover状态就不会被触发。但是只要在a:hover增加某些特定的属性变化，本例中是“border:none;”，就可以触发这个事件了。这里的特定属性有：direction/text-align/text-indent/float/overflow/position，但是font属性无效。
好了，这样我们就可以实现兼容性很好的鼠标触发图片放大效果，而且是纯CSS实现。不过有同事说这样的效率未必好，建议用两组图片，只有用户触发了某一张小图时候再载入大图，这在缩略图很多的时候可以尝试，具体做法不再阐述。
也许有人说这里的缩略图排列一定要用绝对定位么？答案是不一定。一种方法是用传统的ul，li依靠浮动排列，然后去掉a的样式定义，直接在a:hover上加载。这样还可以避免了IE6的hover的Bug，但是在做demo的时候发现之后会出现：只要鼠标移动上去之后动一下，原来的缩略图就出现跳动。
希望大家一起来讨论，还有哪些问题和改进的建议。
