<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< META NAME ="Author" CONTENT ="hhshushu" />
< META NAME ="Keywords" CONTENT ="純CSS圖片放大效果" />
< META NAME ="Description" CONTENT ="純CSS圖片放大效果" />
< title >純CSS圖片放大效果 </ title >
< 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 ; border : none ; 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 >
</ head >
< body >
< div id ="main-content" >
< ul >
< li id ="pic-01" >< a href ="http://bbs.blueidea.com" >< img src ="http://bbs.blueidea.com/images/default/logo.gif" alt ="圖1" /></ a ></ li >
< li id ="pic-02" >< a href ="http://bbs.blueidea.com" >< img src ="http://bbs.blueidea.com/images/default/logo.gif" alt ="圖2" /></ a ></ li >
< li id ="pic-03" >< a href ="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256" >< img src ="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt ="圖3" /></ a ></ li >
< li id ="pic-04" >< a href ="#" >< img src ="#" alt ="圖4" /></ a ></ li >
< li id ="pic-05" >< a href ="#" >< img src ="#" alt ="圖5" /></ a ></ li >
< li id ="pic-06" >< a href ="#" >< img src ="#" alt ="圖6" /></ a ></ li >
< li id ="pic-07" >< a href ="#" >< img src ="#" alt ="圖7" /></ a ></ li >
< li id ="pic-08" >< a href ="#" >< img src ="#" alt ="圖8" /></ a ></ li >
< li id ="pic-09" >< a href ="#" >< img src ="#" alt ="圖8" /></ a ></ li >
</ ul >
</ div >
</ body >
</ html >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< META NAME ="Author" CONTENT ="hhshushu" />
< META NAME ="Keywords" CONTENT ="純CSS圖片放大效果" />
< META NAME ="Description" CONTENT ="純CSS圖片放大效果" />
< title >純CSS圖片放大效果 </ title >
< 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 ; border : none ; 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 >
</ head >
< body >
< div id ="main-content" >
< ul >
< li id ="pic-01" >< a href ="http://bbs.blueidea.com" >< img src ="http://bbs.blueidea.com/images/default/logo.gif" alt ="圖1" /></ a ></ li >
< li id ="pic-02" >< a href ="http://bbs.blueidea.com" >< img src ="http://bbs.blueidea.com/images/default/logo.gif" alt ="圖2" /></ a ></ li >
< li id ="pic-03" >< a href ="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256" >< img src ="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt ="圖3" /></ a ></ li >
< li id ="pic-04" >< a href ="#" >< img src ="#" alt ="圖4" /></ a ></ li >
< li id ="pic-05" >< a href ="#" >< img src ="#" alt ="圖5" /></ a ></ li >
< li id ="pic-06" >< a href ="#" >< img src ="#" alt ="圖6" /></ a ></ li >
< li id ="pic-07" >< a href ="#" >< img src ="#" alt ="圖7" /></ a ></ li >
< li id ="pic-08" >< a href ="#" >< img src ="#" alt ="圖8" /></ a ></ li >
< li id ="pic-09" >< a href ="#" >< img src ="#" alt ="圖8" /></ a ></ li >
</ ul >
</ div >
</ body >
</ html >