JQuery+png实现webqq2.0图标效果

        首先要感谢大家一直以来对我笔记的支持，我很受鼓舞。把学习笔记写下来与大家分享，交流，不仅可以让大家增加一些解决实际的思路，也可以让自己更深刻地体会一次，谢谢！

         qqweb2.0版出来也不久，它的桌面式个性应用很漂亮，我很喜欢它最上面一排的图效果。

         在我昨天写的一个页面的时候，我试着模拟了下，还是比较像的，呵呵，现在把实现这个功能的代码贴出来。对于文件布置规则不太明白的朋友可以参考我前面的笔记，在此就不再赘述了。

         Default.aspx 中的代码（表现代码）：

Code:

1. <div id="menuplay">  
2.                 <img id="xysy" src="Css/Images/sczyxy.png" alt="学院首页" /><img id="jpkc" src="Css/Images/jpkc.png"  
3.                     alt="精品课程" />  
4.                 <img id="jsjx" src="Css/Images/jsjx.png" alt="计算机系" /><img id="ytsg" src="Css/Images/ytsg.png"  
5.                     alt="院图书馆" /><img id="yjyw" src="Css/Images/yjyw.png" alt="院就业网" />  
6.                 <img id="dkbm" src="Css/Images/dkbm.png" alt="等考报名" />  
7.             </div>  
8.         </div>  

          Jscript.js中的代码（记得和JQuery代码关联哦^_^）：

Code:

1. $("#menuplay>img").bind("mouseover",function(){$(this).addClass("menubg")}).bind("mouseout",function(){$(this).removeClass("menubg")});  

Site.css代码（样式代码）：

Code:

1. #headermenu   
2. {   
3.     width:100%;   
4.     height:80px;   
5.     background-image:url(Images/headermenubg.jpg);   
6.     background-repeat:repeat-x;   
7.     clear:none;   
8. }   
9. .menubg   
10. {   
11.   
12.     background-image:url(Images/menubg.png);   
13.     background-repeat:no-repeat;   
14. }   
15. #menuplay   
16. {   
17.        
18.     margin:0px auto;   
19.     margin-top:10px;   
20.     width:680px;   
21.     line-height:100px;   
22.        
23.   
24. }  

        现在很重要的就是对图片的处理了，用Fireworks制作半透明图标，图标的大小采用75*75像素，但是是内容占据50*50像素，再在下方加上相应的文字，其余部分使其透明。再来绘制一张menbg.png图片（下附图片），同样采用75*75像素。解释一下，为什么要设为相同的大小，我们知道图标背景和图标的大小是一样的，如果我们将图标设小一点或不透明，我们就看不到效果了。好了，还是贴上效果图。

menu.bg

最终效果