学步园

由于需要，在网上搜了好多资料，最后觉得这个效果比较适合自己的需要，然后整理成自己喜欢的代码风格，放在这里。

  <script language="javascript" type="text/javascript"><!--<br /> /**<br /> ===========================================================================<br /> ** 类名：msnMessage<br /> ** 功能：提供类似MSN消息框<br /> ** 整理：唐军平<br /> ** 日期：2009-9-1<br /> ---------------------------------------------------------------------------<br /> var msg = new msnMessage("hello", 250, 150, "短消息提示：", "您好！您有1封消息：", "下午三点开会！", "_top", urlTo); //这里的_top是打开页面的方式，也可以是_blank,_self，_parent等。根据自己具体的需要设置。<br /> msg .show();<br /> ===========================================================================<br /> **/<br /> /**<br /> ** 消息构造<br /> **/<br /> function msnMessage(id, width, height, caption, title, message, target, action) {<br /> this.id = id;<br /> this.title = title;<br /> this.caption = caption;<br /> this.message = message;<br /> this.target = target;<br /> this.action = action;<br /> this.width = width ? width : 200;<br /> this.height = height ? height : 120;<br /> this.timeout = 150;<br /> this.speed = 20;<br /> this.step = 1;<br /> this.right = screen.width - 1;<br /> this.bottom = screen.height;<br /> this.left = this.right - this.width;<br /> this.top = this.bottom - this.height;<br /> this.timer = 0;<br /> this.pause = false;<br /> this.close = false;<br /> this.autoHide = true;<br /> }<br /> /**<br /> ** 隐藏消息方法<br /> **/<br /> msnMessage.prototype.hide = function() {<br /> if (this.onunload()) {<br /> var offset = this.height > this.bottom - this.top ? this.height : this.bottom - this.top;<br /> var me = this;</p> <p> if (this.timer > 0) {<br /> window.clearInterval(me.timer);<br /> }<br /> var fun = function() {<br /> if (me.pause == false || me.close) {<br /> var x = me.left;<br /> var y = 0;<br /> var width = me.width;<br /> var height = 0;<br /> if (me.offset > 0) {<br /> height = me.offset;<br /> }</p> <p> y = me.bottom - height;</p> <p> if (y >= me.bottom) {<br /> window.clearInterval(me.timer);<br /> me.Pop.hide();<br /> }<br /> else {<br /> me.offset = me.offset - me.step;<br /> }<br /> me.Pop.show(x, y, width, height);<br /> }<br /> }<br /> this.timer = window.setInterval(fun, this.speed)<br /> }<br /> }<br /> /**<br /> ** 消息卸载事件，可以重写<br /> **/<br /> msnMessage.prototype.onunload = function() {<br /> return true;<br /> }<br /> /**<br /> ** 消息命令事件，要实现自己的连接，请重写它<br /> **<br /> **/<br /> msnMessage.prototype.oncommand = function() {<br /> //this.close = true;<br /> window.open(this.action, this.target);<br /> this.hide();<br /> }<br /> /**<br /> ** 消息显示方法<br /> **/<br /> msnMessage.prototype.show = function() {<br /> var oPopup = window.createPopup(); //IE5.5+<br /> this.Pop = oPopup;<br /> var w = this.width;<br /> var h = this.height;<br /> var str = "<div style='border-right:#455690 1px solid;border-top: #a6b4cf 1px solid;z-index:99999;left:0px;bolder-left:#a6b4cf 1px solid;width:" + w + "px;border-bottom:#455690 1px solid;position:absolute;top:0px;height:" + h + "px;background-color:#c9d3f3'>";<br /> str += "<table style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" mce_style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>";<br /> str += "<tr>";<br /> str += "<td style="font-size:12px;color:#0f2c8c" mce_style="font-size:12px;color:#0f2c8c" width=30 height=24></TD>";<br /> str += "<td style="padding-left:4px;font-weight: normal;font-size:12px;color:#1f336b;padding-top: 4px" mce_style="padding-left:4px;font-weight: normal;font-size:12px;color:#1f336b;padding-top: 4px" vAlign=center width='100%'>" + this.caption + "</td>";<br /> str += "<td style="padding-right: 2px; padding-top: 2px" mce_style="padding-right: 2px; padding-top: 2px" vAlign=center align=right width=19>";<br /> str += "<span title=关闭 style="font-weight: bold;font-size: 12px;cursor:hand;color: red;margin-right: 4px" mce_style="font-weight: bold;font-size: 12px;cursor:hand;color: red;margin-right: 4px" id='btSysClose' >×</span></td>";<br /> str += "</tr>";<br /> str += "<tr>";<br /> str += "<td style="padding-right:1px;padding-bottom: 1px" mce_style="padding-right:1px;padding-bottom: 1px" colSpan=3 height=" + (h - 28) + ">";<br /> str += "<div style='border-right:#b9c9ef 1px solid;padding-right:8px;border-top:#728eb8 1px solid;padding-left:8px;font-size:12px;padding-bottom:8px;border-left:#728eb8 1px solid;width:100%;color:#1f336b;padding-top: 8px;border-bottom:#b9c9ef 1px solid;height:100%'>" + this.title + "<br/><br/>";<br /> str += "<div style="word-break:break-all" mce_style="word-break:break-all" align=left><a href="javascript:void(0)" mce_href="javascript:void(0)" hidefocus=true id='btCommand'><font color=#ff0000>" + this.message + "</font></a></div>";<br /> str += "</div>";<br /> str += "</td>";<br /> str += "</tr>"<br /> str += "</table>";<br /> str += "</div>";<br /> oPopup.document.body.innerHTML = str;<br /> this.offset = 0;<br /> var me = this;<br /> oPopup.document.body.onmouseover = function() { me.pause = true; }<br /> oPopup.document.body.onmouseout = function() { me.pause = false; }<br /> var fun = function() {<br /> var x = me.left;<br /> var y = 0;<br /> var width = me.width;<br /> var height = me.height;<br /> if (me.offset > me.height) {<br /> height = me.height;<br /> }<br /> else {<br /> height = me.offset;<br /> }<br /> y = me.bottom - me.offset;<br /> if (y <= me.top) {<br /> me.timeout--;<br /> if (me.timeout == 0) {<br /> window.clearInterval(me.timer);<br /> if (me.autoHide) {<br /> me.hide();<br /> }<br /> }<br /> }<br /> else {<br /> me.offset = me.offset + me.step;<br /> }<br /> me.Pop.show(x, y, width, height);<br /> }<br /> this.timer = window.setInterval(fun, this.speed)<br /> var btClose = oPopup.document.getElementById("btSysClose");<br /> btClose.onclick = function() {<br /> me.close = true;<br /> me.hide();<br /> }<br /> var btCommand = oPopup.document.getElementById("btCommand");<br /> btCommand.onclick = function() {<br /> me.oncommand();<br /> }<br /> }<br /> /**<br /> ** 设置速度方法<br /> **/<br /> msnMessage.prototype.speed = function(s) {<br /> var t = 20;<br /> try {<br /> t = praseInt(s);<br /> }<br /> catch (e)<br /> { }<br /> this.speed = t;<br /> }<br /> /**//*<br /> ** 设置步长方法<br /> **/<br /> msnMessage.prototype.step = function(s) {<br /> var t = 1;<br /> try {<br /> t = praseInt(s);<br /> }<br /> catch (e)<br /> { }<br /> this.step = t;<br /> }<br /> msnMessage.prototype.rect = function(left, right, top, bottom) {<br /> try {<br /> this.left = left != null ? left : this.right - this.width;<br /> this.right = right != null ? right : this.left + this.width;<br /> this.bottom = bottom != null ? (bottom > screen.height ? screen.height : bottom) : screen.height;<br /> this.top = top != null ? top : this.bottom - this.height;<br /> }<br /> catch (e)<br /> { }<br /> }<br /> // --></script> 

调用代码 ：

<script language="javascript" type="text/javascript"><!--<br /> displayMessage();<br /> function displayMessage() {<br /> var messages = '下午三点开会，准时参加!';<br /> var urlTo = 'messages.aspx';<br /> if (messages) {<br /> var msg1 = new msnMessage("hello", 250, 150, "短消息提示：", "您好！", messages, "_top", urlTo);<br /> msg1.rect(null, null, null, screen.height - 50);<br /> msg1.speed = 10;<br /> msg1.step = 5;<br /> msg1.show();<br /> }<br /> setTimeout("displayMessage()", 10000);<br /> }<br /> // --></script>  

效果图：