利用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 Math.random()随机数函数
Nov 04 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 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开发GUI
2006/10/09 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
简单介绍Python中的decode()方法的使用
2015/05/18 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
求职信的正确写法
2014/07/10 职场文书
教师节祝酒词
2015/08/11 职场文书
python实现的web监控系统
2021/04/27 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL