标题 | 仿163邮件提示 |
范文 | 查看效果:仿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邮件提示-网站制作学习网</title> <meta content="仿163邮箱,提示,javascript,特效,新信息提示,右下角信息提示,网站制作学习网" http-equiv="keywords"> <meta content="通过jquery做了一个仿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;//设子默认的隐藏时间 var k;//定义框架对象 var show_o;//定义时间对象 var hide_o;//定义时间对象 $(function(){ var msg = "网站制作学习网提醒你:你有新信息";//定义显示内容 $("#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(){//定义显示窗口函数 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();} } </script> <body> 这做了一个仿163有新邮件提醒,在右下角显示提示窗口。<br> 如果改为触发的提醒,则将$(function(){});改改为一个函数,调用函数即可<br> 网站制作学习网原创转载请注明http://www.forasp.cn <div id='foraspcn'></div> </body> </html> |
随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。