性感的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 没效果撒。