利用JQuery制作符合Web标准的QQ弹出消息
利用JQuery制作符合Web标准的QQ弹出消息
发布时间:2016-12-30 来源:查字典编辑
摘要:这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画,感觉这个自定义动画就是像flash里的形状和...

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

<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>

<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教程学习
编程开发子分类