CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片放大效果

發(fā)布時(shí)間：2010/8/12 17:26:59

現(xiàn)在在含有圖片較多的頁面上，我們會(huì)以縮略圖的形式展示圖片，當(dāng)用戶將鼠標(biāo)移動(dòng)到縮略圖上時(shí)，我們就會(huì)按原圖大小顯示出來。這種應(yīng)用已經(jīng)很普遍，尤其在商品展示和用戶頭像場景中。

寫之前發(fā)現(xiàn)網(wǎng)上的都不是很理想，兼容性一般。再看了《超越CSS》之后，覺得上面的想法不錯(cuò)，這次和大家分享一下。大致思路就是：通過絕對(duì)定位把縮略圖圖排列好，然后通過css的hover偽類屬性來實(shí)現(xiàn)圖片尺寸放大。具體如下：

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;}
/*使用絕對(duì)定位讓圖片固定，從而脫離頁面流*/
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;}
/*<

上一篇：學(xué)會(huì)substring的用法

相關(guān)新聞推薦