主營業(yè)務(wù):網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序制作 石家莊網(wǎng)站制作網(wǎng)站建設(shè)有限公司歡迎您!
石家莊閃云網(wǎng)絡(luò)科技有限公司
客服熱線15383239821
如何讓自己的網(wǎng)站更有質(zhì)量?

CSS實現(xiàn)鼠標移動圖片放大效果

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

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

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

demo文件下載點這里

CSS文件如下:

  1. <style type="text/css" title="">
  2. body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;}
  3. #main-content{border:5px solid #7bc809;padding:5px;background:#fff ;}
  4. ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding給圖片撐開空間*/} li{display:inline;}
  5. li a{position:relative;}
  6. li a:hover{position:relative;color:#000;z-index:1000;}
  7. /*此處要有border:none屬性,否則IE6下面無法顯示出來,是IE6偽類的BUG*/
  8. li a img{width:100px;height:100px;border:none;position:absolute;}
  9. /*使用絕對定位讓圖片固定,從而脫離頁面流*/
  10. li a:hover img{
  11. position:absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;}
  12. /*<

相關(guān)新聞推薦

在線客服 : 服務(wù)熱線:15383239821 電子郵箱: 27535611@qq.com

公司地址:石家莊市新華區(qū)九中街江西大廈4062

備案號:冀ICP備2022000585號-4