仿163邮件提示
2016-06-16来源:易贤网

查看效果:仿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>

2025公考·省考培训课程试听预约报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息