在網頁的左邊放個收起來的 FB 網址 .... 放個收起來的 iframe ....可拉出收起來 ...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
#mwt_mwt_slider_scroll
{
top: 0;
right:100%;
width:85%;
position: fixed;
z-index:9999;
}
#mwt_slider_content{
background:#3c5a98;
text-align:center;
padding-top:20px;
}
#mwt_fb_tab {
position:absolute;
top:20px;
right:-24px;
width:24px;
background:#3c5a98;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding:9px 0;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
#mwt_fb_tab_auto {
position:absolute;
top:20px;
right:-24px;
width:24px;
background:#3c5a98;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding:9px 0;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
#mwt_fb_tab span {
display:block;
height:12px;
padding:1px 0;
line-height:12px;
text-transform:uppercase;
font-size:12px;
}
</style>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript'>
$(function(){
var w = $("#mwt_slider_content").width();
$('#mwt_slider_content').css('height', ($(window).height() - 20) + 'px' ); //將區塊自動撐滿畫面高度
$("#mwt_fb_tab").mouseover(function(){ //滑鼠滑入時
$("#mwt_mwt_slider_scroll").animate({ left:'0px' }, 600 ,'swing');
});
$("#mwt_slider_content").mouseleave(function(){ //滑鼠離開後
$("#mwt_mwt_slider_scroll").animate( { left:'-'+w+'px' }, 600 ,'swing');
});
});
</script>
</head>
<body>
<div id="mwt_mwt_slider_scroll">
<div id="mwt_fb_tab">
<span>F</span>
<span>B</span>
</div>
<div id="mwt_slider_content">
<iframe src="https://zh-tw.facebook.com/你的FB" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:100% ; height:100%;" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
雜七雜八 (1)