右下面彈出框實現代碼

html 以下

<div id="rightNoticeSlide">
        <div class="rightNoticeSlide-title">
            <a href="javaScript:void(0)" id="close" target="_self">×</a>
            <div class="rightNoticeSlide-title-content" style="">biaoti</div>
            <div style="clear:both;"></div>
        </div>
        <div class="out_message_content " style="">
            <div id="message_content" style="">
                <ul style="">
                    <li><a href="index2.html">內容1</a></li>
                    <li>內容2</li>
                    <li>內容1</li>
                    <li>內容2</li>
                    <li>內容1</li>
                    <li>內容2</li>
                </ul>
            </div>
        </div>
    </div>

js 以下

        function Jihua_Cnblogs_Com() { $("#rightNoticeSlide").slideDown("slow");  }
        function KeleyiAutoHide() { $("#rightNoticeSlide").slideUp("slow");  }
        $(document).ready(function () {
            var a  =setTimeout(function () { KeleyiAutoHide(); },5000);
            setTimeout(function () {
                Jihua_Cnblogs_Com();
            }, 1);
           a;
            $("#close").click(function () {
                KeleyiAutoHide();
            });
       $("#rightNoticeSlide").hover(function(){
    clearTimeout(a);
   
  },function(){
   a=setTimeout(function () { KeleyiAutoHide(); },5000)
  });
           
        })

slidedown 通常是隱藏的div 向下慢慢滑動，所有顯示，此例子剛開始向上滑動慢慢所有顯示，緣由是樣式定義了position:fixed;left 及 right,至關於把下面與右邊的位置固定了，slidedown應理解爲展開，slideup理解爲收縮，不能理解爲向上滑動或者向下滑動

css 以下

#rightNoticeSlide{border:#ccc 1px solid;z-index:100;width:300px;position:fixed; display:none;background:#fcfcfc; bottom:5px; right:10px; overflow:hidden;}
.rightNoticeSlide-title{border:1px solid #fff;border-bottom:none;width:100%;height:35px;border-bottom:1px solid #ccc;font-size:12px;overflow:hidden;color:#fff;background:#069dd5}
#close{float:right;padding:6px 8px 5px 0;width:16px;line-height:auto;color:#a1e4fd;font-size:14px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;}
#close:hover{color:#fff;}
.rightNoticeSlide-title-content{padding:8px 0 5px 10px;width:100px;line-height:18px;text-align:left;overflow:hidden;}
.out_message_content{padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;}
#message_content{margin:0 5px 0 5px;padding:10px 0 10px 5px;font-size:12px;color:#333;text-align:left;overflow:hidden;}
#message_content ul{color:red;list-style:none;line-height:20px;padding-left:0;}