标题 | 仿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' style= display:none;></div> </body> </html> |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。