css3模仿airplay播放器界面

今天给大家介绍个极小巧的绿色音乐播放器AirPlay,该播放器大小不到1M,界面华丽功能强大,无论在 XP 还是 Windows7 下都能显示华丽的半透明玻璃特效,另外还支持歌词、专辑图片下载,读取压缩文件等功能,可以说麻雀虽小,五脏俱全,是我见过的最好的音乐播放器!
我用这款播放器已经有一年多了,没有更新过,百看不厌。某天我同事说这个界面能做成网页形式也挺好的,乘空余时间,我用html5和css3模仿了它的界面。
这里用到了css3的圆角、背景渐变、阴影、动画等效果,仅兼容firefox 3.6+和chrome 10+。可以参考我以前的文章css3新增的五个属性
chrome10以下的渐变写法比较繁琐我就没写了,感兴趣话的可以参考下面给出的资料。

提示:你可以先修改部分代码再运行。

下面给出airplay官网地址,喜欢的话下载去吧:-P:http://www.podez.com/zion.php
新版地址:http://www.podez.com/index.html

参考资料:
背景渐变(CSS3 Gradient Backgrounds):http://css-tricks.com/examples/CSS3Gradient/
动画效果:http://www.w3schools.com/css3/css3_transitions.asp
CSS Border使用小分享:http://ued.taobao.com/blog/2010/08/04/css-border使用小分享/

firefox的offsetLeft/offsetTop问题

obj.offsetLeft是相对于”offsetParent”的左边距离,offsetParent是除了position:static以外的定位元素,若其父级中不存在定位元素则相对于整个页面。
在火狐下,当父元素(position:relative)的border和overflow:hidden同时出现时,其子元素(position:absolute)的offsetLeft/offsetTop值会减去border的值,而IE则正常。

提示:你可以先修改部分代码再运行。

例子中,box2的offsetLeft值在火狐下为150,IE为160,若去掉overflow:hidden或者box1的border,火狐和IE就显示的一样了。