利用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 相关文章推荐
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
详解JavaScript树结构
2017/01/09 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python实现的系统实用log类实例
2015/06/30 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python实现批处理文件
2020/07/28 Python
提高python代码运行效率的一些建议
2020/09/29 Python
如何提高SQL Server的安全性
2016/07/25 面试题
大学生职业生涯规划范文
2014/01/08 职场文书
安全生产检查通报
2014/01/29 职场文书
房屋出售协议书
2014/04/10 职场文书
设计顾问服务计划书
2014/05/04 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
生日答谢词
2015/01/05 职场文书
毕业典礼邀请函
2015/01/31 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python