close
在網頁的左邊放個收起來的 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>
全站熱搜
留言列表