查看效果:仿163邮件提示
代码如下:
var d_h = 120;//定义显示窗口高度
var d_w = 170;//定义显示窗口宽度
var delay_t = 3;//设子默认的隐藏时间
var k;//定义框架对象
var show_o;//定义时间对象
var hide_o;//定义时间对象
$(function(){
var msg = "网站制作学习网提醒你:你有新信息";//定义显示内容
$("#foraspcn").html(msg+"
我知道了
$("#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(){//定义显示窗口函数
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(){//定义隐藏窗口函数
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();}
}
这做了一个仿163有新邮件提醒,在右下角显示提示窗口。
如果改为触发的提醒,则将$(function(){});改改为一个函数,调用函数即可
网站制作学习网原创转载请注明http://www.forasp.cn
更多信息请查看IT技术专栏