|
三、分析實現(xiàn)方法
此實例效果一定會用到層的疊加和相對、絕對定位，而且要應(yīng)用CSS透明度濾鏡，這是應(yīng)該首先會想到的。它的原理是讓兩個層完美吻合的疊加，一個層默認時隱藏掉，用鼠標(biāo)事件觸發(fā)顯示，另外左下角的“+”圖形默認情況沒有隱藏掉，要把它獨立出來處理。
1．默認情況下，如果里面的大圖片沒有下載完，會有一塊灰色的色塊，圖形下載完了，在圖片四周會有灰色的邊界，所以在這里組織一個有3px填充的大盒子，內(nèi)容區(qū)塊大小與圖片大小相等，加上灰色的背景，設(shè)置其定位方式為相對定位，等一下其內(nèi)部元素就可以以它為參考進行絕對定位，所以用到下面樣式：
.blueidea {
background-color: #CCC;
margin:5px;/*因為我一共做了三個實例,等一下排列使它們不會靠在一起*/
padding: 3px;/*形成邊框裝飾，同時等一下也方便控制其子元素位置,所以我沒有用BORDER*/
height: 96px;/*與圖片等高*/
width: 128px;
position: relative;
float:left;/*讓三個實例橫向排列*/
}
2．限定圖片大小，并不顯示邊框，用到下面樣式：
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}
3．組織文字說明圖層，讓其大小比下層稍�。ㄒ驗槲野才帕�1px的邊框），在這個盒子內(nèi)，讓其上邊有一定填充（不要用邊界，因為我們等一下要用到半透明效果，這個效果是覆蓋下面整個區(qū)域的），讓文字說明不會靠著上邊，再讓文字縮進一段距離，主要是為了方便等一下對LOGO做背景精確定位到文字說明前，文字不會與LOGO重疊在一起。（在做的時候可以多次精細調(diào)節(jié)，直至達到滿意為止）。接著為這一圖層加上個半透明濾鏡效果，并重新給出一個margin值，等一下我們要用這種方法來初始化說明圖層移出可視區(qū)域。用到下面樣式：
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*讓說明文字不要太靠上邊界*/
background:#FFF url(http://www.hsptc.com/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO圖片定位*/
text-indent: 28px;/*文本縮進28px,避免與背景LOGO疊加*/
filter:alpha(opacity=90);/*CSS透明度濾鏡*/
opacity:0.9;/*針對Mozilla瀏覽器CSS透明度濾鏡*/
display: block;
text-decoration: none;/*去除說明文字鏈接下劃線*/
cursor:pointer; /*讓光標(biāo)顯示手形*/
margin:0px;/*重定位文字說明層回到正常位置*/
}
4．隱藏說明圖層，這里用到margin無限大負值來把元素移出可視區(qū)域，我們把這一步放在后面做，不然一開始把它移出去了，你怎么在做的過程中看文字說明層是否與下一層吻合好，是吧。這里用到樣式：
.blueidea a span {
margin-top:-9000px;/*初始化對象不可見,這里不用display: none,因為display: none對搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}
5．定位“+”圖形，這里我們要注意一點是，不要把它也安排在<a></a>內(nèi)，因為測試表明它是可以獨立響應(yīng)的，不是與文字說明層一起響應(yīng)的。這里我用到背景的變換效果，但是這個效果只能在像FF這樣的標(biāo)準(zhǔn)瀏覽器中生效，這是因為IE7以下版本A狀態(tài)偽類bug緣故，當(dāng)然IE7是支持的了，IE現(xiàn)在已逐漸向標(biāo)準(zhǔn)靠攏了，這可是標(biāo)準(zhǔn)網(wǎng)頁設(shè)計者的福音。這里用到樣式：
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"圖片鼠標(biāo)滑過背景變換,只有標(biāo)準(zhǔn)瀏覽器起作用,IE7以下版本BUG*/
}
6．解決IE7以下版本A狀態(tài)偽類bug，加入一條如下樣式：
.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A狀態(tài)偽類bug*/
}
四、不足
此實例的不足是圖片左下角的“+”圖形變換效果在IE7以下版本瀏覽器中失效，本人還沒有想到較好的解決辦法，因為我的要求是：只能純CSS實現(xiàn)，盡量少用樣式代碼，同時保證做出來的實例不隨它在網(wǎng)頁中出現(xiàn)位置的變化而改變，這樣“+”元素一定會用到絕對定位，同時其父級采用相對定位，而且要讓這種背景變換效果在IE7以下版本生效，只能用A標(biāo)簽，現(xiàn)在問題是父元素內(nèi)已出現(xiàn)一次A了，那么在樣式控制時又會出現(xiàn)樣式的繼承作用，從而導(dǎo)致效果變亂，如果你能有更好的實現(xiàn)方法一定要記得寫出來與大家分享哦。
源碼下載：demo.rar
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2734016-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2007/4612.asp 
出處：藍色理想
責(zé)任編輯：moby
上一頁 仿6room網(wǎng)站圖片鏈接效果 [1] 下一頁
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 仿6room網(wǎng)站圖片鏈接效果 [2]
