查看效果：仿163郵件提示
代碼如下:
<!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>
<meta http-equiv=content-type content=text ml; charset=gb2312 />
<title>仿163郵件提示-網(wǎng)站制作學(xué)習(xí)網(wǎng)</title>
<meta content=仿163郵箱,提示,javascript,特效,新信息提示,右下角信息提示,網(wǎng)站制作學(xué)習(xí)網(wǎng) http-equiv=keywords>
<meta content=通過jquery做了一個(gè)仿163郵件提示，通過事件來控制，也可以自行修改事件 http-equiv=description>
</head>
<script language=javascript src=js/jquery-1.4.4.min.js></script>
<script language=javascript >
var d_h = 120;//定義顯示窗口高度
var d_w = 170;//定義顯示窗口寬度
var delay_t = 3;//設(shè)子默認(rèn)的隱藏時(shí)間
var k;//定義框架對(duì)象
var show_o;//定義時(shí)間對(duì)象
var hide_o;//定義時(shí)間對(duì)象
$(function(){
var msg = 網(wǎng)站制作學(xué)習(xí)網(wǎng)提醒你:你有新信息;//定義顯示內(nèi)容
$(#foraspcn).html(msg+<br><br><a href='#' onclick='delay_();'>我知道了<a></div>);
$(#foraspcn).css({top:$(window).height()-15,left:$(window).width()-d_w-20,width:d_w,height:1,z-index:999,border:'solid #000 1px',position:'absolute',overflow:'hidden',text-align:'center',padding-top:10}).show();//這里的15 和20減量是為了做偏移，不同的瀏覽器下的偏移
show_o = setinterval(s_k,20);//
});
function s_k(){//定義顯示窗口函數(shù)
var obj =$(#foraspcn);
var height_ =parseint(obj.css(height));
var top_ =parseint(obj.offset().top)
$(#te).html(height_);
obj.css(height,height_+1).css(top,top_-1);
if(height_>=d_h){clearinterval(show_o);settimeout(delay_,delay_t*1000);}
}
function delay_(){clearinterval(show_o);hide_o=setinterval(h_k,20);}
function h_k(){//定義隱藏窗口函數(shù)
var obj =$(#foraspcn);
var height_ =parseint(obj.css(height));
var top_ =parseint(obj.offset().top)
obj.css(height,height_-1).css(top,top_+1);
if(height_<=0){clearinterval(hide_o);obj.hide();}
}
</script>
<body>
這做了一個(gè)仿163有新郵件提醒，在右下角顯示提示窗口。<br>
如果改為觸發(fā)的提醒，則將$(function(){});改改為一個(gè)函數(shù)，調(diào)用函數(shù)即可<br>
網(wǎng)站制作學(xué)習(xí)網(wǎng)原創(chuàng)轉(zhuǎn)載請(qǐng)注明http://www.forasp.cn
<div id='foraspcn' style= display:none;></div>
</body>
</html>
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試