利用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控制css中的float的代码
Aug 16 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
如何给phpadmin一个保护
2006/10/09 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
python中定义结构体的方法
2013/03/04 Python
python获取远程图片大小和尺寸的方法
2015/03/26 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python实现随机漫步方法和原理
2019/06/10 Python
Tensorflow 多线程设置方式
2020/02/06 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
考核评语大全
2014/04/29 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
2014年招商工作总结
2014/11/22 职场文书
银行催款通知书
2015/04/17 职场文书
答辩状格式范本
2015/05/22 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技