利用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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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 禁止页面缓存输出
2009/01/07 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python网络编程实例简析
2014/09/26 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Linux如何为某个操作添加别名
2015/02/05 面试题
计算机专业推荐信范文
2013/11/20 职场文书
小学门卫岗位职责
2013/12/17 职场文书
门卫人员岗位职责
2013/12/24 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
空乘英文求职信
2014/04/13 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
法学求职信
2014/06/22 职场文书
中学清明节活动总结
2014/07/04 职场文书
中国梦读书活动总结
2014/07/10 职场文书
内科护士节演讲稿
2014/09/11 职场文书
会计工作检讨书
2015/02/19 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
Python的property属性详细讲解
2022/04/11 Python