首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-11-22 
性感的CD封面 – Javascript + CSS 实现CD封面的变换网上看到的很有意思的东西,利用Javascript + CSS来变换

性感的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,很简单的就达到了更换封面的目的。

?

?

?

原始图片:

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

?

?

风格1:

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

?

风格2:

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

?

风格3:

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

?

?

?

点击这里下载


点击这里查看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   刚试了下,效果不错

热点排行