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

基本思路是这样子滴：首先弹出消息框其实就是一个div层,页面加载完了以后我们应该通过CSS把div层定位到页面右下角的下方,并且把他隐藏起来,然后当我们点击页面中的按钮的时候就触发动画函数,div层开始从下往上升,在这里我们为了增加视觉感,在上升的过程中有透明度的渐变,然后div层中有一个关闭按钮,点击后又触发另一个动画函数,div层就往下降,如此而已,思路想好了以后就正式开始代码的编写工作,以下是我test.html的源码：
代码如下:

$(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);
}





有新用户注册
关闭




以上代码经测试,是有效果出来了,不过如果大家放在多个浏览器里测试一下就能看到,在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搞的非常清楚。

下面是最终源码:
代码如下:

$(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);
}





有新用户注册
关闭