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

这个问题的关键在于,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="/UploadFiles/2021-04-02/jquery.min.js">    <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>

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。