超级酷的提示框

说明，此提示框可以让你很方便地自定义文字大小，字型，颜色，背景色，边框颜色，速度以及最后一个字的颜色。酷的很！！

共分三步

1.在<head></head>里加入
<script language=javaScript>
<!-- 开始 -

// 宽度
var tickerwidth=120

// 高度
var tickerheight=100

// 提示框顶端到文字的距离(pixels)
var tickerpadding=5

// 边框宽度 (pixels)
var borderwidth=2

// 字体型号
var fnt="宋体"

// 字号
var fntsize=9

// 最后文字的字号
var fntsizelastletter=8

// 文字颜色
var fntcolor="008800"

// 最后文字的颜色
var fntcolorlastletter="ff0000"

// 字体粗细，1 - 9 调整粗细
var fntweight=3

// 背景颜色
var backgroundcolor="CCFFCC"

// 文字间的停顿时间(microseconds)
var standstill=2000

// 速度 (数值大越慢)
var speed=40

// 距离要提示信息的水平大小 (pixels)
var xdistance=50

// 垂直大小(pixels)
var ydistance=20

// 以下不要改动
var timer
var topposition=0
var leftposition=0
var x,y
var i_substring=0
var i_presubstring=0
var i_message=0
var message
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function getmessagebackground() {
messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+" cellspacing=0 cellpadding=0><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
messagebackground+="&nbsp;</td></tr></table>"
}

function getmessagecontent() {
messagecontent="<table border=0 cellspacing=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"
messagecontent+="<font color='"+fntcolor+"'>"
messagecontent+=messagepresubstring
messagecontent+="</font>"
messagecontent+="</span>"
messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"
messagecontent+="<font color='"+fntcolorlastletter+"'>"
messagecontent+=messageaftersubstring
messagecontent+="</font>"
messagecontent+="</span>"
messagecontent+="</td></tr></table>"
}

function showticker() {
if (i_substring<=message.length-1) {
i_substring++
i_presubstring=i_substring-1
if (i_presubstring<0) {i_presubstring=0}
messagepresubstring=message.substring(0,i_presubstring)
messageaftersubstring=message.substring(i_presubstring,i_substring)
getmessagecontent()
if (document.all) {
ticker.innerHTML=messagecontent
timer=setTimeout("showticker()", speed)
}
if (document.layers) {
document.ticker.document.write(messagecontent)
document.ticker.document.close()
timer=setTimeout("showticker()", speed)
}
}
else {
clearTimeout(timer)
}
}

function hideticker() {
clearTimeout(timer)
i_substring=0
i_presubstring=0
if (document.all) {
document.all.ticker.style.visibility="hidden"
document.all.tickerbg.style.visibility="hidden"
}
if (document.layers) {
document.ticker.visibility="hidden"
document.tickerbg.visibility="hidden"
}
}

function showmessage(linkmessage) {
getmessagebackground()
message=linkmessage

i_substring=0
i_presubstring=0
leftposition=x+xdistance
topposition=y+ydistance
if (document.all) {
document.all.ticker.style.posLeft=leftposition
document.all.ticker.style.posTop=topposition
document.all.tickerbg.style.posLeft=leftposition
document.all.tickerbg.style.posTop=topposition
tickerbg.innerHTML=messagebackground
document.all.ticker.style.visibility="visible"
document.all.tickerbg.style.visibility="visible"
showticker()
}
if (document.layers) {
document.ticker.left=leftposition
document.ticker.top=topposition
document.tickerbg.left=leftposition
document.tickerbg.top=topposition
document.tickerbg.document.write(messagebackground)
document.tickerbg.document.close()
document.ticker.visibility="visible"
document.tickerbg.visibility="visible"
showticker()
}
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// - 结束 - -->
</script>

2.在<body></body>里加入

<DIV ID="tickerbg" style="position:absolute;"></DIV>
<DIV ID="ticker" style="position:absolute;"></DIV>

3.在你需要的地方加入onmouseover、onmouseout事件。
一切OK!

posted @ 2007-03-29 09:15  海浪~~  阅读(243)  评论(0)    收藏  举报