职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 885|回复: 10

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

[复制链接]
Jethro 发表于 2011-6-16 17:02 | 显示全部楼层 |阅读模式
网上看到的很有意思的东西,利用Javascript + CSS来变换CD的封面,其中主要是CSS在起作用,实现起来很简单,
Html代码
  1. /* Jewel Case */   
  2.             ul.music li.jewel img{   
  3.                 width:72px;   
  4.                 height:72px;   
  5.                 top:3px;   
  6.                 left:12px;   
  7.             }              
  8.             ul.music li.jewel a{   
  9.                 background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;   
  10.                 width:90px;   
  11.                 height:82px;                              
  12.             }   
  13.             ul.music li.jewel{   
  14.                 background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;                              
  15.             }   
  16.                        /* Jewel Case */   
  17.             ul.music li.jewel img{   
  18.                 width:72px;   
  19.                 height:72px;   
  20.                 top:3px;   
  21.                 left:12px;   
  22.             }              
  23.             ul.music li.jewel a{   
  24.                 background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;   
  25.                 width:90px;   
  26.                 height:82px;                              
  27.             }   
  28.             ul.music li.jewel{   
  29.                 background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;                              
  30.             }   
  31.             /* Vinyl Sleeve */   
  32.             ul.music li.vinyl img{   
  33.                 width:72px;   
  34.                 height:72px;   
  35.                 left:2px;   
  36.                 top:1px;   
  37.             }              
  38.             ul.music li.vinyl a{   
  39.                 background:url(http://www.komodomedia.com/projects/music_covers/vinyl.png) 0 0 no-repeat;   
  40.                 width:96px;   
  41.                 height:76px;                              
  42.             }   
  43.             ul.music li.vinyl{   
  44.                 background:url(http://www.komodomedia.com/projects/music_covers/vinyl_insert.gif) 2px 1px no-repeat;                              
  45.             }   
  46.             /* Compact Disc */   
  47.             ul.music li.cd img,   
  48.             ul.music li.cd a{   
  49.                 width:82px;   
  50.                 height:82px;   
  51.                 top:0;   
  52.                 left:0;   
  53.             }              
  54.             ul.music li.cd a{   
  55.                 background:url(http://www.komodomedia.com/projects/music_covers/cd.png) 0 0 no-repeat;            
  56.                 height:86px;   
  57.             }   
  58.             ul.music li.cd{   
  59.                 background:url(http://www.komodomedia.com/projects/music_covers/blank_cd.jpg) 0 0 no-repeat;                              
  60.             }<BR><BR><BR><BR>  

  61. /* Jewel Case */
  62.                         ul.music li.jewel img{
  63.                                 width:72px;
  64.                                 height:72px;
  65.                                 top:3px;
  66.                                 left:12px;
  67.                         }                        
  68.                         ul.music li.jewel a{
  69.                                 background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;
  70.                                 width:90px;
  71.                                 height:82px;                                                        
  72.                         }
  73.                         ul.music li.jewel{
  74.                                 background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;                                                        
  75.                         }
  76.                        /* Jewel Case */
  77.                         ul.music li.jewel img{
  78.                                 width:72px;
  79.                                 height:72px;
  80.                                 top:3px;
  81.                                 left:12px;
  82.                         }                        
  83.                         ul.music li.jewel a{
  84.                                 background:url(http://www.komodomedia.com/projects/music_covers/jewel.png) 0 0 no-repeat;
  85.                                 width:90px;
  86.                                 height:82px;                                                        
  87.                         }
  88.                         ul.music li.jewel{
  89.                                 background:url(http://www.komodomedia.com/projects/music_covers/blank_insert.gif) 12px 3px no-repeat;                                                        
  90.                         }
  91.                         /* Vinyl Sleeve */
  92.                         ul.music li.vinyl img{
  93.                                 width:72px;
  94.                                 height:72px;
  95.                                 left:2px;
  96.                                 top:1px;
  97.                         }                        
  98.                         ul.music li.vinyl a{
  99.                                 background:url(http://www.komodomedia.com/projects/music_covers/vinyl.png) 0 0 no-repeat;
  100.                                 width:96px;
  101.                                 height:76px;                                                        
  102.                         }
  103.                         ul.music li.vinyl{
  104.                                 background:url(http://www.komodomedia.com/projects/music_covers/vinyl_insert.gif) 2px 1px no-repeat;                                                        
  105.                         }
  106.                         /* Compact Disc */
  107.                         ul.music li.cd img,
  108.                         ul.music li.cd a{
  109.                                 width:82px;
  110.                                 height:82px;
  111.                                 top:0;
  112.                                 left:0;
  113.                         }                        
  114.                         ul.music li.cd a{
  115.                                 background:url(http://www.komodomedia.com/projects/music_covers/cd.png) 0 0 no-repeat;                        
  116.                                 height:86px;
  117.                         }
  118.                         ul.music li.cd{
  119.                                 background:url(http://www.komodomedia.com/projects/music_covers/blank_cd.jpg) 0 0 no-repeat;                                                        
  120.                         }
复制代码
通过上面的CSS,很简单的就达到了更换封面的目的。



原始图片:
cd-style-no.jpg


风格1:
cd-style-01.jpg

风格2:
cd-style-02.jpg

风格3:
cd-style-03.jpg






无处不在 发表于 2011-6-16 17:02 | 显示全部楼层
查看了demo 没效果撒。

已经来了吗 发表于 2011-6-16 17:02 | 显示全部楼层
查看了demo 没效果撒。


叫我小乖 发表于 2011-6-16 17:03 | 显示全部楼层
demo什么都没有。。。。楼主看看哦

能文能武 发表于 2011-6-16 17:03 | 显示全部楼层
liupesnap 写道
demo什么都没有。。。。楼主看看哦

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

天上智喜 发表于 2011-6-16 17:03 | 显示全部楼层
我ff3.5.7能看到效果,没任何问题,效果确实不错,
不过IE6测试不通过,效果全无

已经来了吗 发表于 2011-6-16 17:03 | 显示全部楼层
关键我用chrome看的,效果太差了

ksdal 发表于 2011-6-16 17:03 | 显示全部楼层
关键我用chrome看的,效果太差了


能文能武 发表于 2011-6-16 17:03 | 显示全部楼层
chrome 4 没有问题

broken 发表于 2011-6-16 17:04 | 显示全部楼层
FF下没问题,IE8显示不出来。


只学java 发表于 2011-8-10 10:42 | 显示全部楼层
本人姓:常...名:有理..
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-28 16:25 , Processed in 0.151602 second(s), 27 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表