[查看演示] 源码如下
----------------------------------------------------------
<HTML><HEAD><TITLE>Untitled Document－www.51windows.Net</TITLE>
<SCRIPT>
//***********默认设置定义.*********************
tPopWait=100;//停留tWait豪秒后显示提示。
tPopShow=4000;//显示tShow豪秒后关闭提示
showPopStep=10;
popOpacity=100;
//darkvn
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #FFFFCC; border: 1px #000000 solid; font-size: 12px; padding-right: 2px; padding-left: 2px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
</SCRIPT>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>.sm12px {
FONT-SIZE: 12px
}
.cPopText {
BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.green {
BACKGROUND-COLOR: #ccffcc; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.red {
BACKGROUND-COLOR: #ff6666; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.yellow {
BACKGROUND-COLOR: #ffff99; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.purple {
BACKGROUND-COLOR: #cc99ff; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.marqgreen {
BACKGROUND-COLOR: #ccffcc; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; WIDTH: 100px
}
.hello {
BACKGROUND-IMAGE: url(dia.gif); BACKGROUND-REPEAT: no-repeat; FONT-SIZE: 12px; HEIGHT: 35px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px; WIDTH: 89px
}
</STYLE>
<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0"
marginwidth="0">
<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=sm12px height=270
width=600>
<TBODY>
<TR>
<TD colSpan=2 height=41>
<HR>
</TD></TR>
<TR>
<TD colSpan=2 height=63>
<P>在页面<head>区加入这行：<BR><FONT color=#0000ff
face="Verdana, Arial, Helvetica, sans-serif"
dypop=".............<br>.............<br>.............<br>.............<br>.............<br>.............<br>.............<br>.............<br>........."><script
src="poptext.js"></script></FONT></P>
<P>并定义了<FONT color=#0000ff dypop="<font color=red><B>???</B></font>"
dyclass="yellow">提示框风格</FONT><FONT color=#ff3300
dypop="Cascading Style Sheets">式样表</FONT><BR>.cPopText { font-size: 12px;
background-color: #CCFFCC; padding-top: 2px; padding-right: 2px;
padding-bottom: 2px; padding-left: 2px; border:1px solid #000000;}</P>
<P><BR></P></TD></TR>
<TR bgColor=#e6ffe6>
<TD width="76%"><BR>使用cPopText整体风格<BR><img src="sq02.gif" width="33"
height="25" alt="绿色主题"> </TD>
<TD width="24%"><IMG alt=绿色主题 height=25 src="show3.files/sq02.gif"
width=33><IMG alt=黄色主题 height=25 src="show3.files/sq03.gif" width=33><IMG
alt=红色主题 height=25 src="show3.files/sq04.gif" width=33><IMG alt=紫色主题
height=25 src="show3.files/sq05.gif" width=33></TD></TR>
<TR bgColor=#ffffcc>
<TD width="76%"><BR>在标记内加入dyclass属性设置个别提示风格<BR><img src="sq02.gif"
width="33" height="25" dypop="绿色主题" dyclass="green"></TD>
<TD width="24%"><IMG height=25 src="show3.files/sq02.gif" width=33
dypop="绿色主题" dyclass="green"><IMG height=25 src="show3.files/sq03.gif"
width=33 dypop="黄色主题" dyclass="yellow"><IMG height=25
src="show3.files/sq04.gif" width=33 dypop="红色主题....................."
dyclass="red"><IMG alt=purple!purple!purple................ height=25
src="show3.files/sq05.gif" width=33 dyclass="purple"></TD></TR>
<TR>
<TD colSpan=2 height=122><FONT size=5 dypop="<center>Hello!<center>"
dyclass="hello">HELLO!</FONT>
<P><IMG height=25 src="show3.files/sq02.gif" width=33 dypop="<B>绿色主题</B>"
dyclass="green"><IMG height=25 src="show3.files/sq03.gif" width=33
dypop="<I>黄色主题</I>" dyclass="yellow"><IMG height=25
src="show3.files/sq02.gif" width=33 dypop="<marquee >绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题</marquee>"
dyclass="marqgreen"><IMG height=25 src="show3.files/sq03.gif" width=33
dypop="<img src='go01.gif' width='16' height='16'>黄色主题"
dyclass="yellow"></P>
<DIV id=Layer1
style="BACKGROUND-COLOR: #cc6600; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; HEIGHT: 25px; POSITION: absolute; WIDTH: 104px; Z-INDEX: 1; layer-background-color: #CC6600"
dypop="This is a Layer.">支持更多的标记。<BR><div><span><td><BR><font><B>
</DIV>
<P> </P></TD></TR>
<TR>
<TD colSpan=2 height=57>
<TABLE border=1 cellPadding=0 cellSpacing=0 width=90>
<TBODY>
<TR>
<TD dypop="This is a TD"> </TD></TR>
<TR>
<TD dypop="This is TD2"> </TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD colSpan=2 height=24> </TD></TR></TBODY></TABLE></BODY></HTML>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
