利用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 validation插件表单验证的一个例子
Mar 03 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
Vue CLI3中使用compass normalize的方法
May 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
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
python生成excel的实例代码
2017/11/08 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
QML用PathView实现轮播图
2020/06/03 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
暑期培训心得体会
2014/09/02 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书