性感的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

 

 

 

 

评论

12 楼 桦树雨夏 2010-02-07  

刚试了下，效果不错

11 楼 fogtower 2010-02-06  

caizh2009 写道

没源码呢，下载出来的不知道撒文件

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

10 楼 caizh2009 2010-02-05  

没源码呢，下载出来的不知道撒文件

9 楼 hesy_007 2010-02-04  

FF下没问题，IE8显示不出来。

8 楼 風一樣的男子 2010-02-04  

chrome 4 没有问题

7 楼 fogtower 2010-02-04  

yhjhoo 写道

关键我用chrome看的，效果太差了

在我的chrome下，没有问题呀，效果还不错。如果效果不好的话，下载下来，在本地打开试试。

6 楼 yhjhoo 2010-02-04  

关键我用chrome看的，效果太差了

5 楼 commx 2010-02-04  

我ff3.5.7能看到效果，没任何问题，效果确实不错，
不过IE6测试不通过，效果全无

4 楼 fogtower 2010-02-04  

liupesnap 写道

demo什么都没有。。。。楼主看看哦

我用firefox，IE6，Chrome看没有任何问题呀，很正常呀。四个CD图片，可以切换风格呀。

3 楼 liupesnap 2010-02-04  

demo什么都没有。。。。楼主看看哦

2 楼 fogtower 2010-02-03  

zy_pub 写道

查看了demo 没效果撒。

不会吧，我用IE和Firefox看都没有什么问题呀。

1 楼 zy_pub 2010-02-03  

查看了demo 没效果撒。