右下面弹出框实现代码

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)
  });
           
        })

 

css 如下

#rightNoticeSlide{border:#ccc 1px solid;z-index:100;width:300px;position:absolute; 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;}