性感的CD封面 Javascript + CSS 实现CD封面的变换

网上看到的很有意思的东西，利用Javascript + CSS来变换CD的封面，其中主要是CSS在起作用，实现起来很简单，

/* Jewel Case */ul.music li.jewel img{width:72px;height:72px;top:3px;left:12px;}ul.music li.jewel a{background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;width:90px;height:82px;}ul.music li.jewel{background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;}                       /* Jewel Case */ul.music li.jewel img{width:72px;height:72px;top:3px;left:12px;}ul.music li.jewel a{background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;width:90px;height:82px;}ul.music li.jewel{background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;}/* Vinyl Sleeve */ul.music li.vinyl img{width:72px;height:72px;left:2px;top:1px;}ul.music li.vinyl a{background:url(http://www.komodomedia.com/projects/music_covers/vinyl.png) 0 0 no-repeat;width:96px;height:76px;}ul.music li.vinyl{background:url(http://www.komodomedia.com/projects/music_covers/vinyl_insert.gif) 2px 1px no-repeat;}/* Compact Disc */ul.music li.cd img,ul.music li.cd a{width:82px;height:82px;top:0;left:0;}ul.music li.cd a{background:url(http://www.komodomedia.com/projects/music_covers/cd.png) 0 0 no-repeat;height:86px;}ul.music li.cd{background:url(http://www.komodomedia.com/projects/music_covers/blank_cd.jpg) 0 0 no-repeat;}

?

通过上面的CSS，很简单的就达到了更换封面的目的。

?

?

?

原始图片：

?

?

风格1：

?

风格2：

?

风格3：

?

?

?

点击这里下载

点击这里查看Demo

?

?

?

?

1 楼 zy_pub 2010-02-03 查看了demo 没效果撒。 2 楼 fogtower 2010-02-03 zy_pub 写道查看了demo 没效果撒。
不会吧，我用IE和Firefox看都没有什么问题呀。 3 楼 liupesnap 2010-02-04 demo什么都没有。。。。楼主看看哦 4 楼 fogtower 2010-02-04 liupesnap 写道demo什么都没有。。。。楼主看看哦
我用firefox，IE6，Chrome看没有任何问题呀，很正常呀。四个CD图片，可以切换风格呀。 5 楼 commx 2010-02-04 我ff3.5.7能看到效果，没任何问题，效果确实不错，
不过IE6测试不通过，效果全无 6 楼 yhjhoo 2010-02-04 关键我用chrome看的，效果太差了 7 楼 fogtower 2010-02-04 yhjhoo 写道关键我用chrome看的，效果太差了
在我的chrome下，没有问题呀，效果还不错。如果效果不好的话，下载下来，在本地打开试试。 8 楼 一的男子 2010-02-04 chrome 4 没有问题 9 楼 hesy_007 2010-02-04 FF下没问题，IE8显示不出来。 10 楼 caizh2009 2010-02-05 没源码呢，下载出来的不知道撒文件
11 楼 fogtower 2010-02-06 caizh2009 写道没源码呢，下载出来的不知道撒文件

兄弟，你到底懂不懂呀，写的那么清楚 JavaScript+CSS实现，例子里面的index.html就是全部的源码，需要的JavaScript和css都内置到里面了。当然需要在线下载下来jquery。例子里面有一些垃圾文件，那是MAC OS的文件，你不用理会这些文件。
总之，例子里面的所有的文件就是一个index.html加上图片，就完了。
12 楼 桦树雨夏 2010-02-07 刚试了下，效果不错