上一篇
下一篇
纯CSS构造的图片切换效果beta3
作者:飘零雾雨 日期:2009-06-11
转载请注明出处，css探索之旅-飘零雾雨的庄园
对于图片切换效果相信大家都早已不陌生了，在各大网站这样的效果都是司空见惯的。好早前就写过一个纯CSS的相册图片展示(书签应用)，不过在那篇文章里还遗留有几个问题没有解决，在之后就一直没有时间去弄，时间一长就懒得去搞了。
今天在翻以前的文章看，偶然翻到这篇07年的文章，看到里面还有历史遗留问题没有解决。就打算继续进行改造完善，完成了纯CSS图片切换效果beta3。
之前的文章里主要还有2个问题未解决，一是：切换序号无法指定激活状态的样式，用户很难分别当前显示的哪一个区域的内容；二是：该效果不支持Opera。
beta3版主要是解决了切换序号无法指定激活状态的样式这个问题，至于对Opera的支持，仍然是个让人头痛的问题，暂时没有较好的解决方案，也许下个版本会搞掂，呵呵。
来，瞧瞧对beta3的效果演示：
效果演示：［纯CSS构造图片切换展示效果beta3版］
从该实例里可以看到，激活状态的序号的背景变成了黑色，区别于普通状态下的灰色。
解决该问题的主要思路是不给切换序号预设背景颜色，因为无法判断出哪个序号是当前的，不过被切换的内容区域一眼就能看出，在点击不同的序号时，是3张不同的照片和相应的文字描述在轮换。既然无法判断当前序号，而被切换的内容确可以得到的，那么可不可以在内容上做文章呢？答案是可以的 （这种解决方案07年时我在另外一个例子里曾经用到过，就是另类TabStrip效果(书签应用补遗) ）。现在就应用到这个例子中来。
就是给每个内容块加上背景并调整位置到对应的切换序号下，来充当序号的背景，这样就变通的解决了无法识别当前序号的问题。具体做法，详见实例代码。
历史版本：
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论