日期:2014-05-17  浏览次数:20630 次

性感的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下,没有问题呀,效果还不错。如果效果不好的话,下载下来,在本地打开试试。