利用JQuery制作符合Web标准的QQ弹出消息


Posted in Javascript onJanuary 14, 2014

这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画,感觉这个自定义动画就是像flash里的形状和渐变动画一样,只要定义了开头和结尾的两个关键帧,中间的动画过程会自动完成,不用会jQuery的可去查下jQuery的帮助文档.

基本思路是这样子滴:首先弹出消息框其实就是一个div层,页面加载完了以后我们应该通过CSS把div层定位到页面右下角的下方,并且把他隐藏起来,然后当我们点击页面中的按钮的时候就触发动画函数,div层开始从下往上升,在这里我们为了增加视觉感,在上升的过程中有透明度的渐变,然后div层中有一个关闭按钮,点击后又触发另一个动画函数,div层就往下降,如此而已,思路想好了以后就正式开始代码的编写工作,以下是我test.html的源码:

<!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 runat="server">  
    <title>QQ弹出消息</title>  
    <style type="text/css">  
        #pop{   
            width: 250px;   
            height: 150px;   
            border: 1px solid #fcc;   
            background-color: yellow;   
            position: absolute;   
            right: 16px;   
            bottom: -150px;   
            display: none;   
        }   
    </style>  
    <script src="jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
     $(document).ready(function() {   
            $("#pop").css("opacity", 0);   
            $("#btn").click(fun);   
            $("#cloPop").click(fun2);   
        });   
        function fun() {   /* 弹出框从下往上慢慢升起,其中还包括了透明度的变化 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "16px",   
                    opacity: 1   
                },1000);   
        }   
    function fun2() {   /* 弹出框从上往下降下去 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "-150px",   
                    opacity: 0   
                },1000);   
        }   
    </script>  
</head>  
<body style="height: 1800px;">  
    <form id="form1" runat="server">  
    <div>  
    <input type="button" value="缓缓升起的窗口" id="btn" />  
    <div id="mes"></div>  
    </div>  
    </form>  
    <div id="pop">  
        <a href="http://g.cn" target="_blank">有新用户注册</a>  
        <a id="cloPop" href="#">关闭</a>  
    </div>  
</body>  
</html>

以上代码经测试,是有效果出来了,不过如果大家放在多个浏览器里测试一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME浏览器里的效果都是一样的,可是当你放到firefox里测试的时候,就会发现动画本来应该是从下往上的,可是现在却是从上往下,为什么会这样子呢???
经本人多方查证,并在老师的帮助下,终于解决该问题:

这个问题的关键在于,Firefox以html为页面的根元素,而IE以body为根元素。你设置了body为1800px高,但是在Firefox中,html元素的高度仍然是0,因此你的div#pop,实际上起点是最上面。

修改方法很简单,增加一条CSS设置即可:

html{
    height:100%;
}   

这样,一开始的时候,html的高度充满浏览器窗口,pop就到底下去了,效果和在IE中完全相同。

所以搞JS,CSS是非常重要的基础,一定要把CSS搞的非常清楚。

下面是最终源码:

<!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 runat="server">  
    <title>QQ弹出消息</title>  
    <style type="text/css">  
    html{   
        height: 100%;   
    }   
        #pop{   
            width: 250px;   
            height: 150px;   
            border: 1px solid #fcc;   
            background-color: yellow;   
            position: absolute;   
            right: 16px;   
            bottom: -150px;   
            display: none;   
        }   
    </style>  
    <script src="jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
     $(document).ready(function() {   
            $("#pop").css("opacity", 0);   
            $("#btn").click(fun);   
            $("#cloPop").click(fun2);   
        });   
        function fun() {   /* 弹出框从下往上慢慢升起,其中还包括了透明度的变化 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "16px",   
                    opacity: 1   
                },1000);   
        }   
        function fun2() {   /* 弹出框从上往下降下去 */   
            $("#pop").css("display", "block");   
                $("#pop").animate({   
                    bottom: "-150px",   
                    opacity: 0   
                },1000);   
        }   
    </script>  
</head>  
<body style="height: 1800px;">  
    <form id="form1" runat="server">  
    <div>  
    <input type="button" value="缓缓升起的窗口" id="btn" />  
    <div id="mes"></div>  
    </div>  
    </form>  
    <div id="pop">  
        <a href="http://g.cn" target="_blank">有新用户注册</a>  
        <a id="cloPop" href="#">关闭</a>  
    </div>  
</body>  
</html>
Javascript 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
js Function类型
Dec 04 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
js中opener与parent的区别详细解析
Jan 14 #Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 #Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 #Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 #Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 #Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 #Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 #Javascript
You might like
PHP 函数执行效率的小比较
2010/10/17 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
Prototype Date对象 学习
2009/07/12 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
关于Java String的一道面试题
2013/09/29 面试题
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
广州盈通面试题
2015/12/05 面试题
读书伴我成长演讲稿
2014/05/07 职场文书
化妆品活动策划方案
2014/05/23 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
消防验收申请报告
2015/05/15 职场文书
二审代理词范文
2015/05/25 职场文书