网站制作学习网JS脚本→正文:jquery仿163邮件提示-精简
字体:

jquery仿163邮件提示-精简

JS脚本 2011/6/20 12:09:49  点击:不统计

forasp.cn
通过jquery做了一个仿163邮件提示,通过事件来控制,也可以自行修改事件
原来一版:http://www.forasp.cn/html/2277.html
本次效果http://www.forasp.cn/test/20116201292763812.html
更新了事件触发改为了jquery操作

<!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邮件提示-网站制作学习网</title>
<meta content="仿163邮箱,提示,javascript,特效,新信息提示,右下角信息提示,网站制作学习网" http-equiv="keywords">
<meta content="通过jquery做了一个仿163邮件提示,通过事件来控制,也可以自行修改事件" http-equiv="description">
</head>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" >
var d_h = 120;//设置弹出框的高度
var d_w = 170;//设置弹出框的宽度
var open_t = 3;//设置默认显示时间
var delay_t = 3;//设子默认的显示等待时间
var hide_t = 3;//设置隐藏时间
var top_o,top_;
$(function(){
var obj =$("#foraspcn");
var msg = "网站制作学习网提醒你:你有新信息";
obj.html(msg+"<br><br><a href='#' onclick='h_k();'>我知道了<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减量是为了做偏移,不同的浏览器下的偏移
top_o =parseInt(obj.offset().top);
top_ =top_o-d_h;
obj.animate({top:top_,height:d_h},open_t*1000,function(){setTimeout(h_k,delay_t*1000);});
});
function h_k(){
var obj =$("#foraspcn");obj.stop();
 obj.animate({top:top_o,height:1}, hide_t*1000,function(){obj.hide();});
}
</script>
<body>
这做了一个仿163有新邮件提醒,在右下角显示提示窗口。<br>
如果改为触发的提醒,则将$(function(){});改改为一个函数,调用函数即可<br>
网站制作学习网原创转载请注明http://www.forasp.cn
<div id='foraspcn' style=" display:none;"></div>
</body>
</html>

·上一篇:仿163邮件提示 >>    ·下一篇:javascript跨域获取内容 >>
推荐文章
最新文章