利用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 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
js常用DOM方法详解
Feb 04 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue中touch和click共存的解决方式
Jul 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
企划经理的岗位职责
2013/11/17 职场文书
小学生倡议书范文
2014/05/13 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
无线电知识基础入门篇
2022/02/18 无线电