制作符合WEB标准的QQ弹出消息(jQuery)

niunan

浏览: 721140 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

QQ Web jQuery CSS Firefox

这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了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里测试的时候,就会发现动画本来应该是从下往上的,可是现在却是从上往下,为什么会这样子呢???
经本人多方查证,并在http://learning.artech.cn老师的帮助下,终于解决该问题:

这个问题的关键在于，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>

5
顶

0
踩

分享到：

select into 和 insert into select 两种表 ... | 项目文件“ ”已被重命名或已不在解决方案 ...

2008-10-29 11:49
浏览 4919
评论(1)
查看更多

1 楼 niunan 2008-10-29

之前把问题发到ITCAST.NET上,得到个最新的回复.

itcast.net王老师的回复写道

关于这个问题，我又看了一下JQuery的源码。我觉得这个解答稍微一点不准确，其实设置了bottom为-160px之后，pop就已经在页面可见区域的下方了，并不需要设置了html告诉之后才使pop到底下去
我觉得之所以在firefox中出现这个问题，和FF对于getComputedStyle这个js方法的实现有关，JQuery内部在做animate之前会计算元素执行动画效果的开始和结束位置，其中开始位置会利用getComputedStyle这个方法来计算元素css的‘Computed values’ 。而这个值我理解在FF中和你提到的height是否设定有关。当没有设定html元素的高时，这个值计算出来的就是一个几百的整数（我这里是959），这就意味这JQuery将会把这个元素从bottom为959的位置移动到bottom为16的位置，所以出现了从上向下的动画效果。

牛人就牛人,研究得够深入了...

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论