jquery模仿QQ消息框

//作者:王珺 //时间2009年6月30日9:02:51（修改） //版本:v 1.1.1.2(第二个版本)修正在发生滚动后点击关闭消息框不往下滚动的BUG（而是往上） (function($) { $.fn.extend({ Show: function(widht,height) { var TopY=0;//初始化元素距父元素的距离 $(this).css("width",widht+"px").css("height",height+"px");//设置消息框的大小 $(this).slideDown(1000);//弹出 $("#messageTool").css("margin-top",-height);//为内容部分创建高度 溢出 $("#message_close").click(function() {//当点击关闭按钮的时候 if(TopY==0) { $("#message").slideUp(1000);//这里之所以用slideUp是为了兼用Firefox浏览器 } else { $("#message").animate({top: TopY+height}, "slow", function() { $("#message").hide(); });//当TopY不等于0时 ie下和Firefox效果一样 } }); $(window).scroll(function() { $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height());//当滚动条滚动的时候始终在屏幕的右下角 TopY=$("#message").offset().top;//当滚动条滚动的时候随时设置元素距父原素距离 }); } })} )(jQuery);

 

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ消息框</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="MessageDialogQQ.js"></script>
 <script type="text/javascript">
         $(document).ready(function() {
            $("#message").Show(256,185);
         });
       </script>
</head>
<body>
<div>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>
 <div id="message" style="z-index:100;position:absolute;display:none;bottom:0; right:0; overflow:hidden;">
 <div id="backimage"> <img src="tips_bg.jpg"  alt="这是一张图片"/></div>
    <div style="width:100%;height:25px;overflow:hidden;" id="messageTool">
        <div style="padding:3px 0 0 35px;width:100px;line-height:20px;text-align:center;overflow:hidden;position:absolute;" id="msgtitle">这是一个标题</div>
         <span id="message_close" style="right:10px;width:16px;text-align:center;cursor:pointer;position:absolute;">×</span>
        <div style="clear:both;"></div>
    </div>
     <div id="message_content" style="margin:0 5px 0 5px;padding:10px 0 10px 5px;width:239px;height:135px;text-align:left;overflow:hidden;">
    这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容
    </div>
    </div>
</body>
</html>