zoukankan      html  css  js  c++  java
  • 类QQ右下角弹出消息对话框(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>
        
    <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=" 100%; height: 25px; overflow: hidden;" id="messageTool">
                
    <div style="padding: 3px 0 0 35px;  100px; line-height: 20px; text-align: center;overflow: hidden; position: absolute;" id="msgtitle">
                
    </div>
                
    <span id="message_close" style="right: 10px;  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;  239px;height: 135px; text-align: left; overflow: hidden;">
                内容
            
    </div>
        
    </div>
    </body>
    </html>
    MessageDialogQQ.js
    //作者:王珺(www.it100.info整理)
    //
    时间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);
  • 相关阅读:
    moco-globalsettings
    moco-简述
    stub和mock
    软件测试工作经验分享
    类、对象、方法、属性和实例变量
    你真的对 parseInt有足够的了解吗?
    PhoneGap开发环境搭建(记录一下,仅仅针对Android)
    360 前端面试题
    前端WEB开发工程师面试题-基础部分
    有意思的For循环
  • 原文地址:https://www.cnblogs.com/greatverve/p/1517270.html
Copyright © 2011-2022 走看看