本文共 1352 字，大约阅读时间需要 4 分钟。

当有新消息到达时,网页右下角探出一个小框框，提示消息，并指定链接过去。

实现:

div+css+ajax与js定时程序

div:

<div style="border:1px dashed #800000; padding:15px;display:none; position:fixed;width:160px;height:20px;background-color:#fdd2c5; font-size:19px;"

id="div_newMessage" name="div_newMessage"> </div>

js:

$(document).ready(function() { checkNewMessage(); locateMessageDiv(); //去获取最新的私信 setInterval("checkNewMessage()",60000); });

具体函数实现：

/** * 重定位DIV */ function locateMessageDiv(){ //判断是否为IE6 if($.browser.msie && parseInt($.browser.version) <= 6){ $("#div_newMessage").css("position", "absolute"); } $("#div_newMessage").css("bottom", 2); $("#div_newMessage").css("right", 10); } //此处进行AJAX请求 function checkNewMessage(){ var url="/portal/pri/message/checkNewMessage.action?meetingId=${_portal_meeting_.id}"; //alert(${_portal_meeting_.id}); ajaxRequest(url,getNewMessage,false); function getNewMessage(data){ var count=data.count; if(count>0){ $("#div_newMessage").html("<a href=\"${ctx}/portal/pri/message/list.action?meetingId=${_portal_meeting_.id}\">您有"+count+"条新的消息!</a>"); $("#div_newMessage").show(); // $("#div_newMessage").toggle(); } } }

涉及的功能：

1.JS定时程序:setInterval("checkNewMessage()",60000);

2.程序定位：既可以left top定位，也可以bottom right定位。左上优先原则。

3.IE6与其他大多数浏览器区别

如FF CHROME IE8下，当拖动滚动条的时候，position:fixed定位会一直在右下脚，但是position:absolute的时候，DIV会随着滚动条上去。

在IE6下 无论是fixed或者absolute都会跟着滚动条滚动。

转载地址：http://unlmd.baihongyu.com/