純CSS實(shí)現(xiàn)的無侵入的卡盤（幻燈片）

2024-07-11 08:43:46

字體：大中小

供稿：網(wǎng)友

卡盤，也就是幻燈片，它應(yīng)該是自動(dòng)播放，但目前css是無法做到自動(dòng)播放（可能會(huì)讓你失望），所以它不應(yīng)該叫幻燈片，但我扔這么稱呼它為幻燈片。如果你認(rèn)為可以用腳本來實(shí)現(xiàn)，嗯，地球人都知道，顯然違背了我們的主題，純css的，無侵入的。似乎我標(biāo)題黨了，但請(qǐng)你耐下性子來聽我說。
今天無意在經(jīng)典論壇看到一個(gè)帖子，純CSS的圖片展示效果，它是利用錨點(diǎn)來實(shí)現(xiàn)，創(chuàng)意非常好，但馬上令我興奮，因?yàn)樵撔Ч腥秉c(diǎn)。
Opera無效
無法記錄狀態(tài)
沒有hover效果
這些正是我想說的，我想補(bǔ)充的。
首先，我們讓它來兼容所有A級(jí)瀏覽器。其實(shí)原理很簡單，既然使用錨點(diǎn)，我們應(yīng)該記得css3有個(gè)偽類:target（非IE內(nèi)核瀏覽器都支持），讓它來控制，不就更好？
<style>
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
#b:target{
margin:-260px 0 0;
}
#c:target{
margin:-520px 0 0;
}
</style>
<div class="macji">
<ul>
<li id="a">
<img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
</li>
</ul>
<ol>
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
</ol>
</div>
測試地址
問題2，實(shí)現(xiàn)記錄狀態(tài)，那我們同樣可以用偽類:target來實(shí)現(xiàn)，IE系列瀏覽器不支持。
<style>
/* 省略一些css，下面這行是最關(guān)鍵的 */
a.item:hover, :target a.item{
background:#f60;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a href="#a" class="item">1</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
</li>
<li id="b">
<a href="#b" class="item">2</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<a href="#c" class="item">3</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
測試地址
最后一個(gè)問題，hover效果，這可不是簡單的:hover就可以實(shí)現(xiàn)，我們不能在li上給hover（這樣當(dāng)鼠標(biāo)經(jīng)過li就hover了），我們只能在數(shù)字上hover（<a href=”#a” class=”item”>1</a>）然后來影響它對(duì)于的圖片，貌似不可能純CSS實(shí)現(xiàn)，但確實(shí)可以實(shí)現(xiàn)，用“ + ”來實(shí)現(xiàn)。由于用到:target和“+”，所以只有Firefox、Opera支持。-__-
<style>
.macji{
position:relative;
}
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
ul li{
height:260px;
}
.macji a{
position:absolute;
left:0;
top:0;
z-index:2;
}
a.item{
z-index:10!important;
left:10px;
top:230px;
display:block;
width:20px;
height:20px;
border:solid 1px #777;
line-height:20px;
text-align:center;
color:#fff;
background:#aaa;
}
#b a.item{
left:31px;
}
#c a.item{
left:51px;
}
a.item:hover,:target a.item{
background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
z-index:3;
}
/* 原理是用絕對(duì)定位z-index來顯示，另 “ + ” 只對(duì)節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)有效 */
a.item:hover + a.pic{
z-index:9!important;
}
/* for ie */
a.pic{
* position:static;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a href="#a" class="item">1</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<a href="#b" class="item">2</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
</li>
<li id="c">
<a href="#c" class="item">3</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
最終演示，代碼實(shí)現(xiàn)是很簡單，關(guān)鍵是是否聯(lián)想到原理。舉一反三，將會(huì)得到更多你想要的結(jié)果。不知不覺已是國慶節(jié)了，祝大家節(jié)日快樂！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta content="麥雞(MacJi)的博客，關(guān)注Web內(nèi)容、結(jié)構(gòu)與表現(xiàn)。" name="description" /> <meta content="Copyright (c) 2008 MacJi" name="copyright" /> <meta content="麥雞,MacJi" name="author" /> <meta content="web前端開發(fā),麥雞" name="keywords" /> <title>純css實(shí)現(xiàn)的Tab_武林網(wǎng)</title> <style> body{ font-size:85%; } ul{ margin:0; padding:0; list-style:none; } img{ border-width:0; } .macji{ position:relative; } .macji ul{ width:250px; height:260px; overflow:hidden; } ul li{ height:260px; } .macji a{ position:absolute; left:0; top:0; z-index:2; } a.item{ z-index:10!important; left:10px; top:230px; display:block; width:20px; height:20px; border:solid 1px #777; line-height:20px; text-align:center; color:#fff; background:#aaa; } #b a.item{ left:31px; } #c a.item{ left:51px; } a.item:hover,:target a.item{ background:#f60; } #a:target a.pic,#b:target a.pic,#c:target a.pic{ z-index:3; } a.item:hover + a.pic{ z-index:9!important; } a.pic{ * position:static; } </style> </head> <body id="macji-com"> <h1>打造純CSS的無侵入的卡盤（幻燈片），最終效果</h1> <ol> <li>無記錄狀態(tài)，無hover狀態(tài)，所有瀏覽器支持</li> <li>無hover狀態(tài)，所有非IE瀏覽器支持</li> <li>最終效果，F(xiàn)irefox、Opera支持</li> </ol> <hr /> <div class="macji"> <ul> <li id="a"> <a href="#a" class="item">1</a> <a href="http://www.survivalescaperooms.com" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a> </li> <li id="b"> <a href="#b" class="item">2</a> <a  class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a> </li> <li id="c"> <a href="#c" class="item">3</a> <a ><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a> </li> </ul> </div> <hr /> <p>author: <a href="http://www.survivalescaperooms.com">武林網(wǎng)</a></p> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

上一篇：關(guān)于CSS的一些基礎(chǔ)應(yīng)用

下一篇：w3c標(biāo)準(zhǔn)自適應(yīng)高度height100%不起作用的問題分析