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

byadmin 發表於 2013-5-23 21:59:37 , 4194人已閱讀 , 0人回應

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

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

DEMO範例
社群按鈕.jpg

CSS

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

//將被呼叫的容器使用Scale 0隱藏
.display{
position: absolute;
left: -260px;
top: 0;
width:0;
height:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}

複製代碼

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

.display.show {
display: block !important;
width: 300px;
height: 586px;
position: absolute;
left: -297px;
top: 0;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
-webkit-transform-origin: bottom center;
}

複製代碼

JQUERY

JQuery的部分

<script>
var jq = jQuery.noConflict();
jq(function(){
jq(".sc_facebook").mouseover(function(){
jq(".display").addClass("show");
})
jq(.sc_facebook).mouseout(function(){
jq(".display").removeClass("show");
})
});
jq(function(){
jq(".sc_google").mouseover(function(){
jq(".display2").addClass("show");
})
jq(".sc_google").mouseout(function(){
jq(".display2").removeClass("show");
})
});
</script>

複製代碼

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

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

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

方法二範例DEMO

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