jQuery + CSS3 自己製作臉書、GOOGLE等社群功能按鈕 (收合式)

最近在做工作室首頁的網頁設計時候，剛好有想要放FB粉絲團Social Plugin的需求，不過筆者因為想保持版面乾淨，所以不想直接放在主區域右側邊攔上，霎時突然想到好像國外網頁設計很喜歡把版面物件隱藏起來，需要的時候在透過js來呼叫 ! 之前在逛Blog的時候也恰巧看到了不少相關應用，所以這次就來用jQuery + CSS3 實作一下社群按鈕的案例吧 !

開始執行設計之前主要的規劃就是，利用JQUERY控制滑鼠事件，讓滑鼠移動經過時呼叫出隱藏的物件 (就是放FB社群插件的容器)，然後配上CSS3的Transition 動態效果 , 先來看一下實際效果吧 (請使用 Chrome 和 Firefox 瀏覽器瀏覽，IE瀏覽的話會了transition動態效果)

DEMO範例

CSS

可以看到當滑鼠移動經過 Facebook按鈕或Google按鈕的時候，會呼叫出FB社群插件 (在範例中google按鈕我呼叫的是圖片"偷懶一下")，下面來簡單分析一下程式碼，首先是CSS的部分，這個案例最主要的核心在於控制使用「transform:scale(0);」將要被呼叫的物件給隱藏起來：

1. 
   
2. //將被呼叫的容器使用Scale 0隱藏
   
3. .display{
   
4. position: absolute;
   
5. left: -260px;
   
6. top: 0;
   
7. width:0;
   
8. height:0;
   
9. -webkit-transform:scale(0);
   
10. -moz-transform:scale(0);
    
11. -ms-transform:scale(0);
    
12. -o-transform:scale(0);
    
13. transform:scale(0);
    
14. }

複製代碼

當滑鼠移動經過按鈕時，透過JQuery讓原本的容器產生新的類別，所我們只要對新的類別容器，添加「transform:scale(1);」就可以顯示物件 ..

1. .display.show {
   
2. display: block !important;
   
3. width: 300px;
   
4. height: 586px;
   
5. position: absolute;
   
6. left: -297px;
   
7. top: 0;
   
8. -webkit-transform:scale(1);
   
9. -moz-transform:scale(1);
   
10. -ms-transform:scale(1);
    
11. -o-transform:scale(1);
    
12. transform:scale(1);
    
13. -webkit-transform-origin: bottom center;
    
14. }

複製代碼

JQUERY

JQuery的部分

1. <script>
   
2.     var jq = jQuery.noConflict();
   
3. jq(function(){
   
4.         jq(".sc_facebook").mouseover(function(){
   
5.                 jq(".display").addClass("show");               
   
6.         })
   
7.         
   
8.         jq(.sc_facebook).mouseout(function(){
   
9.                 jq(".display").removeClass("show");
   
10.         })
    
11. });
    
12. 
    
13. jq(function(){        
    
14.                 jq(".sc_google").mouseover(function(){
    
15.                 jq(".display2").addClass("show");               
    
16.         })
    
17.         
    
18.         jq(".sc_google").mouseout(function(){
    
19.                 jq(".display2").removeClass("show");
    
20.         })
    
21. });
    
22. 
    
23. </script>

複製代碼

很簡單的兩句function , 都是命令滑鼠經過指定Class(orID)時，為他添加新Class，然後滑鼠移出時，移除添加的Class，剩下美化的部分就不多說明囉 ~

方法二、直接使用 JQuery fadeIn 效果迅速實現

剛剛方法一只是為了搭配CSS3的麻煩作法 ! 其實真正要應用的話，可以使用fadeIn來直接實現相同效果 , 還帶有淡入淡出動畫效果喔 ! 先看以下範例：

方法二範例DEMO

真正要應用的話，筆者當然是推薦使用方法二，理由很簡單除了CSS可以少寫非常多語法外，相容性也比方法一高，因為方法一有用到CSS3的縮放語法，對某些瀏覽器可能支援部是這麼好 , 本來方法一中還想加入transition動態效果，後來作罷也是因為IE支援度較低的關係 ! 來看一下css語法部分：

CSS

1. 
   
2. //使用display:none 將容器預先隱藏
   
3. .display {
   
4. width: 300px;
   
5. height: 586px;
   
6. position: absolute;
   
7. right: 50px;
   
8. display:none;
   
9. }

複製代碼

JQUERY

1.   //指定hover事件的fadeIn + fadeOut 漸層效果
   
2.         $(function(){
   
3.         
   
4.                 $('.sc_facebook').hover(function(){
   
5.                         $('.display').stop(true, true).fadeIn(400);
   
6.                 } , function(){
   
7.                         $('.display').stop(true, true).fadeOut(400);
   
8.                 });
   
9. 
   
10.         });
    
11.         
    
12.         $(function(){
    
13.         
    
14.                 $('.sc_google').hover(function(){
    
15.                         $('.display2').stop(true, true).fadeIn(400);
    
16.                 } , function(){
    
17.                         $('.display2').stop(true, true).fadeOut(400);
    
18.                 });
    
19. 
    
20.         });
    
21.    

複製代碼