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