前些日子,在淘宝看到一种叫看图购的效果,觉的非常不错,当时就想这种效果应该是js实现的。不料,在一次偶然的机会下,我接触到了这种效果,当时我震惊了,原来只用css就实现了,再一往下看,狂晕,那么简短!不由的引发深思,原来css可以用的这么灵活,看来自己的技巧能力是远远不够的,应该反省。好了,来看看效果吧,一如既往,一起提供附件下载:
注:简单的说明下原理
- 利用定位属性来排版,再利用hover伪类来显示背景图片之间的切换,ie6可能兼容不了,因为ie6不兼容hover的伪类,但是可以用
csshover.htc
等方法解决,请另行查找解决方法,本例不作深一步的解释 - 背景图片上面加一个
<ul>
层,默认为隐藏,当鼠标经过背景图片的时候<ul>
显示,即显示出外面的正方形框框 - 给
<ul>
里面的<li>
<a>
属性加上hover,当鼠标经过某个<li>
里面的<a>
区域时,显示出hover的背景图,即正方形框框里面的对焦图
这个可以用在淘宝上。实现的思路很不错。受启示了
OMG,看着就会了
不错 怎么下载啊
这个的确效果不错,很实用,收藏了