jQuery仿腾讯“今日话题”右上角的分享按钮特效

简介： jQuery仿腾讯“今日话题”右上角的分享按钮特效

经常会看腾讯网的“今日话题”，每天讨论的都是近来最热门的话题。而今天在无意中看到页面右上角的几个分享按钮效果不错；于是自己用jQuery模仿着写了一个，效果实现了，不过因为小生jQuery新手，可能代码有些繁冗，希望高手多多指教！

查看效果：demo

HTML部分：

1. <div id="main">
   
2.         <a href="#" class="item rs" title="RSS订阅"><span>RSS订阅</span><b></b></a>
   
3.         <a href="#" class="item ph" title="用手机浏览"><span>用手机浏览</span><b></b></a>
   
4.         <a href="#" class="item xw" title="分享到新浪微博"><span>分享到新浪微博</span><b></b></a>
   
5.         <a href="#" class="item tw" title="分享到腾讯微博"><span>分享到腾讯微博</span><b></b></a>
   
6.         <a href="#" class="item qz" title="分享到空间"><span>分享到空间</span><b></b></a>
   
7. </div>

复制代码

JS部分：

1. <script type='text/javascript' src='js/jquery-1.6.3.min.js'></script>
   
2. <script type="text/javascript">
   
3. $(document).ready(function(){
   
4. $qzsp = $('a.qz span');
   
5.         $twsp = $('a.tw span');
   
6.         $xwsp = $('a.xw span');
   
7.         $phsp = $('a.ph span');
   
8.         $rssp = $('a.rs span');
   
9. 
   
10.         $qza = $('a.qz');
    
11.         $twa = $('a.tw');
    
12.         $xwa = $('a.xw');
    
13.         $pha = $('a.ph');
    
14.         $rsa = $('a.rs');
    
15.         
    
16.         $('a span').hide();
    
17.         //QQ空间
    
18.         $qza.hover(function(){
    
19.                 $(this).animate({width:"100px",paddingLeft:"10px"},300);
    
20.                 $qzsp.show();
    
21.         },function(){
    
22.                 $(this).animate({width:"34px",paddingLeft:"0"},300);
    
23.                 $qzsp.hide();
    
24.         });
    
25.         //腾讯微博
    
26.         $twa.hover(function(){
    
27.                 $(this).animate({width:"120px",paddingLeft:"10px"},300);
    
28.                 $twsp.show();
    
29.         },function(){
    
30.                 $(this).animate({width:"34px",paddingLeft:"0"},300);
    
31.                 $twsp.hide();
    
32.         });
    
33.         //新浪微博
    
34.         $xwa.hover(function(){
    
35.                 $(this).animate({width:"120px",paddingLeft:"10px"},300);
    
36.                 $xwsp.show();
    
37.         },function(){
    
38.                 $(this).animate({width:"34px",paddingLeft:"0"},300);
    
39.                 $xwsp.hide();
    
40.         });
    
41.         //用手机浏览
    
42.         $pha.hover(function(){
    
43.                 $(this).animate({width:"100px",paddingLeft:"10px"},300);
    
44.                 $phsp.show();
    
45.         },function(){
    
46.                 $(this).animate({width:"34px",paddingLeft:"0"},300);
    
47.                 $phsp.hide();
    
48.         });
    
49.         //RSS订阅
    
50.         $rsa.hover(function(){
    
51.                 $(this).animate({width:"80px",paddingLeft:"10px"},300);
    
52.                 $rssp.show();
    
53.         },function(){
    
54.                 $(this).animate({width:"34px",paddingLeft:"0"},300);
    
55.                 $rssp.hide();
    
56.         });
    
57. });
    
58. </script>

复制代码

CSS部分：

1. *{margin: 0;padding: 0;border: 0;}
   
2. #main{width: 500px; height: 100px; border: 2px solid #b00;margin: 0 auto;background: url(images/wrapBg.png) repeat;padding: 20px;}
   
3. #main a.item{width: 34px; height: 33px;display: block; float: right;margin-right: 15px;background: url(images/wbset.png) 0 0 no-repeat;text-decoration: none;color: #786123;font: 12px/33px "Microsoft Yahei",arial;position: relative;}
   
4. #main a.item span:hover{text-decoration: underline;}
   
5. #main a b{width: 34px; height: 33px;display: block;background: url(images/wbIconBg2.png) no-repeat;position: absolute;right: 0;}
   
6. #main a span{float: left;}
   
7. 
   
8. #main a.qz b{background-position:-1px 0;}
   
9. #main a.tw b{background-position:-43px 0;}
   
10. #main a.xw b{background-position:-85px 0;}
    
11. #main a.ph b{background-position:-175px 0;}
    
12. #main a.rs b{background-position:-128px 0;}

复制代码

仿腾讯今日话题右上角的分享按钮特效.rar

43.99 KB, 下载次数: 168