利用JQuery制作符合Web标准的QQ弹出消息

这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了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>

赞 (0)

相关推荐

  • jQuery实现仿QQ在线客服效果的滚动层代码

    jQuery实现仿QQ在线客服效果的滚动层代码

    本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码.分享给大家供大家参考.具体如下: 这是一款jQuery滚动层,可以做成仿QQ在线客服,虽然效果有点生硬,但水平就这么高了,弹出层是挺实用的,期待大家有新的改进. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-online-style-scroll-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • 用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)

    不太清楚的可以先看看QQ发信的时候的操作,或者参看本文的演示:http://demo.jb51.net/js/email_qq/index.htm 它的功能大概有以下三个步骤: 一个收人框,右侧是联系薄里的分组 一个弹出联系人的窗体,用的是jquery的dialog组件. 一个输入智能提示插件,这里用到的是jquery的组件Autocomplete我想大家都应该有所了解了吧!首先从最简单的开始,那就是做那个弹出窗dialog了,这次没有像我的上篇文章里说的那样用iframe,http://jqu

  • jQuery制作仿腾讯web qq用户体验桌面

    jQuery制作仿腾讯web qq用户体验桌面

    jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上.jQuery用户体验设计,web qq桌面十分动感酷炫. 查看演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" cont

  • jQuery简单实现QQ空间点赞已经取消点赞

    看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能.直接运行的脚本 好友动态点赞代码 jQuery("a.qz_like_btn_v3[data-clicklog='like']").each(function(index,item){ console.log(item); jQuery(item).trigger('click'); }); jQuery(window).scroll(function(){ jQuery("a.qz_like_btn_v3[dat

  • jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

    jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

    演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用jQuery和jPlayer来实现QQ空间音乐的查询. 首先感谢bejson收集的各种有用的接口,当然也包含QQ空间音乐接口. 它的网址是:http://www.bejson.com/webInterface.php 我们要使用的接口位于bejson接口页面中的音乐接口栏里. QQ音乐接口地址: ht

  • jquery实现漂浮在网页右侧的qq在线客服插件示例

    jquery实现漂浮在网页右侧的qq在线客服插件示例

    很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话.具体实现代码如下: 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/xht

  • 基于jQuery实现的QQ表情插件

    基于jQuery实现的QQ表情插件

    不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

  • jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

    jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码

    本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码.分享给大家供大家参考,具体如下: 这是一个黑色的QQ客服代码,显示在网页右侧,点击后会向左展开QQ客服的完整内容,适用的网站范围广,以前发过不少的在线客服,每一款都风格不同,你可以在网页特效栏目搜索"在线客服"看下有你需要的不. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/ 具体代码如

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现大转盘抽奖活动仿QQ音乐代码分享

    jQuery实现大转盘抽奖活动仿QQ音乐代码分享

    jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效源码是一款基于jQuery,点击大转盘开始抽奖可抽到绿钻的仿qq音乐抽奖转盘的代码. 运行效果图:---------------------------------------效果查看 源码下载-------------------------------------- 为大家分享的jQuery实现大转盘抽奖活动仿QQ音乐抽奖特效代码如下 <head> <meta http-equiv="Content-Type" co

  • jquery 仿QQ校友的DIV模拟窗口效果源码

    下面我们来看下这个效果图: 调用代码如下: 复制代码 代码如下: <input value="效果" id="jbox-demo" type="button" /></p> <script language="javascript" type="text/javascript"> $(document).ready(function () { $('#jbox-demo'

随机推荐