您现在的位置: 365建站网 > 365学习 > 类QQ右下角弹出消息对话框(jQuery插件)

类QQ右下角弹出消息对话框(jQuery插件)

文章来源:365jz.com     点击数:2398    更新时间:2009-09-17 10:16   参与评论
源码下载:http://down.0379zd.com/news/show/17002.htm
调用方法:
<!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>
<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;">
            内容
        
</div>
    
</div>
</body>
</html>
MessageDialogQQ.js
//作者:王珺(www.0379zd.com整理)
//
时间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);

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (2398人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------