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

发布时间：2023-09-20 15:45:48 所属栏目：教程来源：

导读：　　这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了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() {   /* 弹出框从下往上慢慢升起,其中还包括了透明度的变化 */

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!