這里所說的彈出消息指的是在網(wǎng)頁右下角升起又下去的那種框框,在這里用到了jQuery的自定義動畫,感覺這個自定義動畫就是像flash里的形狀和漸變動畫一樣,只要定義了開頭和結(jié)尾的兩個關(guān)鍵幀,中間的動畫過程會自動完成,不用會jQuery的可去查下jQuery的幫助文檔.
基本思路是這樣子滴:首先彈出消息框其實就是一個div層,頁面加載完了以后我們應(yīng)該通過CSS把div層定位到頁面右下角的下方,并且把他隱藏起來,然后當(dāng)我們點擊頁面中的按鈕的時候就觸發(fā)動畫函數(shù),div層開始從下往上升,在這里我們?yōu)榱嗽黾右曈X感,在上升的過程中有透明度的漸變,然后div層中有一個關(guān)閉按鈕,點擊后又觸發(fā)另一個動畫函數(shù),div層就往下降,如此而已,思路想好了以后就正式開始代碼的編寫工作,以下是我test.html的源碼:
以上代碼經(jīng)測試,是有效果出來了,不過如果大家放在多個瀏覽器里測試一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME瀏覽器里的效果都是一樣的,可是當(dāng)你放到firefox里測試的時候,就會發(fā)現(xiàn)動畫本來應(yīng)該是從下往上的,可是現(xiàn)在卻是從上往下,為什么會這樣子呢???
經(jīng)本人多方查證,并在http://learning.artech.cn老師的幫助下,終于解決該問題:
這個問題的關(guān)鍵在于，F(xiàn)irefox以html為頁面的根元素，而IE以body為根元素。你設(shè)置了body為1800px高，但是在Firefox中，html元素的高度仍然是0，因此你的div#pop，實際上起點是最上面。
修改方法很簡單，增加一條CSS設(shè)置即可：
html{
??? height:100%;
}???
這樣，一開始的時候，html的高度充滿瀏覽器窗口，pop就到底下去了，效果和在IE中完全相同。
所以搞JS，CSS是非常重要的基礎(chǔ)，一定要把CSS搞的非常清楚。
下面是最終源碼:
基本思路是這樣子滴:首先彈出消息框其實就是一個div層,頁面加載完了以后我們應(yīng)該通過CSS把div層定位到頁面右下角的下方,并且把他隱藏起來,然后當(dāng)我們點擊頁面中的按鈕的時候就觸發(fā)動畫函數(shù),div層開始從下往上升,在這里我們?yōu)榱嗽黾右曈X感,在上升的過程中有透明度的漸變,然后div層中有一個關(guān)閉按鈕,點擊后又觸發(fā)另一個動畫函數(shù),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 target="_blank">有新用戶注冊</a>
<a id="cloPop" href="#">關(guān)閉</a>
</div>
</body>
</html>
以上代碼經(jīng)測試,是有效果出來了,不過如果大家放在多個瀏覽器里測試一下就能看到,在IE6,IE7,IE8B2,OPERA,CHROME瀏覽器里的效果都是一樣的,可是當(dāng)你放到firefox里測試的時候,就會發(fā)現(xiàn)動畫本來應(yīng)該是從下往上的,可是現(xiàn)在卻是從上往下,為什么會這樣子呢???
經(jīng)本人多方查證,并在http://learning.artech.cn老師的幫助下,終于解決該問題:
這個問題的關(guān)鍵在于，F(xiàn)irefox以html為頁面的根元素，而IE以body為根元素。你設(shè)置了body為1800px高，但是在Firefox中，html元素的高度仍然是0，因此你的div#pop，實際上起點是最上面。
修改方法很簡單，增加一條CSS設(shè)置即可：
html{
??? height:100%;
}???
這樣，一開始的時候，html的高度充滿瀏覽器窗口，pop就到底下去了，效果和在IE中完全相同。
所以搞JS，CSS是非常重要的基礎(chǔ)，一定要把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 target="_blank">有新用戶注冊</a>
<a id="cloPop" href="#">關(guān)閉</a>
</div>
</body>
</html>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
