利用JQuery制作符合Web标准的QQ弹出消息
这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jquery的自定义动画,感觉这个自定义动画就是像flash里的形状和渐变动画一样,只要定义了开头和结尾的两个关键帧,中间的动画过程会自动完成,不用会jquery的可去查下jquery的帮助文档.
基本思路是这样子滴：首先弹出消息框其实就是一个p层,页面加载完了以后我们应该通过css把p层定位到页面右下角的下方,并且把他隐藏起来,然后当我们点击页面中的按钮的时候就触发动画函数,p层开始从下往上升,在这里我们为了增加视觉感,在上升的过程中有透明度的渐变,然后p层中有一个关闭按钮,点击后又触发另一个动画函数,p层就往下降,如此而已,思路想好了以后就正式开始代码的编写工作,以下是我test.html的：
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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">
<p>
<input type="button" value="缓缓升起的窗口" id="btn" />
<p id="mes"></p>
</p>
</form>
<p id="pop">
<a href="https://g.cn" target="_blank">有新用户注册</a>
<a id="clopop" href="#">关闭</a>
</p>
</body>
</html>
以上代码经测试,是有效果出来了,不过如果大家放在多个里测试一下就能看到,在ie6,ie7,ie8b2,opera,chrome浏览器里的效果都是一样的,可是当你放到firefox里测试的时候,就会发现动画本来应该是从下往上的,可是现在却是从上往下,为什么会这样子呢???
经本人多方查证,并在老师的帮助下,终于解决该问题:
这个问题的关键在于，firefox以html为页面的根元素，而ie以body为根元素。你设置了body为1800px高，但是在firefox中，html元素的高度仍然是0，因此你的p#pop，实际上起点是最上面。
修改方法很简单，增加一条css设置即可：
html{
height:100%;
}
这样，一开始的时候，html的高度充满浏览器窗口，pop就到底下去了，效果和在ie中完全相同。
所以搞js，css是非常重要的基础，一定要把css搞的非常清楚。
下面是最终源码:
. 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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">
<p>
<input type="button" value="缓缓升起的窗口" id="btn" />
<p id="mes"></p>
</p>
</form>
<p id="pop">
<a href="https://g.cn" target="_blank">有新用户注册</a>
<a id="clopop" href="#">关闭</a>
</p>
</body>
</html>
上一篇： 使用WIn10自带的Linux子系统
下一篇： 大肠息肉都会癌变吗 多久不排便易患癌？