Extreme Thinking
網頁的左邊放個收起來的 FB 網址, 滑鼠移過去開啟 , 離開關閉

2017-09-29

在網頁的左邊放個收起來的 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>