纯CSS实现的无侵入的卡盘（幻灯片）

卡盘，也就是幻灯片，它应该是自动播放，但目前css是无法做到自动播放（可能会让你失望），所以它不应该叫幻灯片，但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现，嗯，地球人都知道，显然违背了我们的主题，纯css的，无侵入的。似乎我标题党了，但请你耐下性子来听我说。今天无意在经典论坛看到一个帖子，纯CSS的图片展示效果，它是利用锚点来实现，创意非常好，但马上令我兴奋，因为该效果有缺点。 Opera无效无法记录状态没有hover效果这些正是我想说的，我想补充的。首先，我们让它来兼容所有A级浏览器。其实原理很简单，既然使用锚点，我们应该记得css3有个伪类:target（非IE内核浏览器都支持），让它来控制，不就更好？ <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，实现记录状态，那我们同样可以用伪类:target来实现，IE系列浏览器不支持。 <style> /* 省略一些css，下面这行是最关键的 */ 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> 测试地址最后一个问题，hover效果，这可不是简单的:hover就可以实现，我们不能在li上给hover（这样当鼠标经过li就hover了），我们只能在数字上hover（<a href=”#a” class=”item”>1</a>）然后来影响它对于的图片，貌似不可能纯CSS实现，但确实可以实现，用“ + ”来实现。由于用到: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; } /* 原理是用绝对定位z-index来显示，另 “ + ” 只对节点的下一个兄弟节点有效 */ 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> 最终演示，代码实现是很简单，关键是是否联想到原理。举一反三，将会得到更多你想要的结果。不知不觉已是国庆节了，祝大家节日快乐！ <!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)的博客，关注Web内容、结构与表现。" name="description" /> <meta content="Copyright (c) 2008 MacJi" name="copyright" /> <meta content="麦鸡,MacJi" name="author" /> <meta content="web前端开发,麦鸡" name="keywords" /> <title>纯css实现的Tab_脚本之家</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>无记录状态，无hover状态，所有浏览器支持</li> <li>无hover状态，所有非IE浏览器支持</li> <li>最终效果，Firefox、Opera支持</li> </ol> <hr /> <div class="macji"> <ul> <li id="a"> <a href="#a" class="item">1</a> <a href="http://www.jb51.net" 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 href="http://www.kanshule.com" 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="http://www.kanshule.com"class="pic"><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.jb51.net">脚本之家</a></p> </body> </html> 提示：您可以先修改部分代码再运行

　　推荐阅读

　　CSS语法缩写规则

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸通常>>>详细阅读

本文标题：纯CSS实现的无侵入的卡盘（幻灯片）

地址：http://www.17bianji.com/kaifa2/CSS/17140.html

1/2 1