您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 類QQ右下角彈出消息對話框(jQuery插件)

類QQ右下角彈出消息對話框(jQuery插件)

文章來源：365jz.com 點(diǎn)擊數(shù)：2466 更新時(shí)間：2009-09-17 10:16 參與評論

源碼下載：http://down.0379zd.com/news/show/17002.htm
調(diào)用方法：

<!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>
    <title>類QQ右下角彈出消息對話框</title>
    <script type="text/javascript" src="style/jquery.js"></script>
    <script type="text/javascript" src="style/MessageDialogQQ.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
            $("#message").Show(256,185);
         });
    </script>

</head>
<body>
<a href="http://www.0379zd.com">www.0379zd.com整理</a>
    <div id="message" style="z-index: 100; position: absolute; display: none; bottom: 0;right: 0; overflow: hidden;">
        <div id="backimage"><img src="style/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;">
            內(nèi)容
        </div>
    </div>
</body>
</html>

MessageDialogQQ.js

//作者:王珺(www.0379zd.com整理)
//時(shí)間2009年6月30日9:02:51（修改）
//版本:v 1.1.1.2(第二個(gè)版本)修正在滾動(dòng)滾動(dòng)的時(shí)候消息框不往下滾動(dòng)的BUG

(function($) {
        $.fn.extend({
            Show: function(widht,height) {
            var TopY=0;//初始化元素距父元素的距離
            $(this).css("width",widht+"px").css("height",height+"px");//設(shè)置消息框的大小
            $(this).slideDown(1000);//彈出
            $("#messageTool").css("margin-top",-height);//為內(nèi)容部分創(chuàng)建高度  溢出
            $("#message_close").click(function() {//當(dāng)點(diǎn)擊關(guān)閉按鈕的時(shí)候
                 if(TopY==0)
                 {
                       $("#message").slideUp(1000);//這里之所以用slideUp是為了兼用Firefox瀏覽器
                 }
                else
                {
                      $("#message").animate({top: TopY+height}, "slow", function() { $("#message").hide(); });//當(dāng)TopY不等于0時(shí)  ie下和Firefox效果一樣
                }
             });
             $(window).scroll(function() {
                 $("#message").css("top", $(window).scrollTop() + $(window).height() - $("#message").height());//當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候始終在屏幕的右下角
                 TopY=$("#message").offset().top;//當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候隨時(shí)設(shè)置元素距父原素距離
              });
            }
         })}
)(jQuery);