当前位置：jQuery学习 > css > 使用css的overflow属性改变缩略图大小

使用css的overflow属性改变缩略图大小

时间：2010-09-06人气：1971QQ群：116983258

最近发现google对图片显示进行了改变，当鼠标移动到图片上时，可以放大图片缩略图，这样一来，用户想查看图片时变得更快捷。同时发现改变大小时有一定的延时，应该使用了js。今天，我们不用js，就用css中overflow属性来实现这样的效果。当然，最终结果没有进行延时显示。

先简单看看html代码：

<div id="preview">
    <a href="#"><img src="http://www.jquery001.com/images/demo/0601.jpg" alt="" /></a>
    <a href="#"><img src="http://www.jquery001.com/images/demo/0603.jpg" alt="" /></a>
    <a href="#"><img src="http://www.jquery001.com/images/demo//0602.jpg" alt="" /></a>
</div>

css样式如下：

#preview a{float:left;width:200px;height:200px;margin-left:5px;overflow:hidden;position:relative;z-index:1;}
#preview a img{position:absolute;top:-100px;left:-100px;}
#preview a:hover{overflow:visible;z-index:2;}

可以看出，实现的原理主要是，设定a标签的宽度和高度，当图片宽度、高度超出指定大小时，进行隐藏。当鼠标移动到a标签上时，overflow属性值设置为visible以显示图片，这样即实现了我们想要得到的效果。当然，这里只是简单的说明了一下实现的原理，如果你有兴趣进行完善，可以完善一下样式，以在实例中进行使用。

查看演示

作者：朋友的你来源：jQuery学习
原文：使用css的overflow属性改变缩略图大小。
版权所有，转载时必须以链接形式注明作者和原出处并保留本声明。
付费支持：