仿淘宝的tips效果

最新推荐文章于 2022-02-05 11:21:41 发布

iteye_6481

最新推荐文章于 2022-02-05 11:21:41 发布

阅读量109

点赞数

文章标签： JavaScript CSS HTML ViewUI

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>仿淘宝网鼠标暂停提示--平常世界平常心，网络时代网络情</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<styletype="text/css"media="screen">
body{
font-size:12px;
}
#popLayer{
background-color:#FFFFCC;
border:1px#000000solid;
font-size:12px;
padding-right:4px;
padding-left:4px;
line-height:18px;
padding-top:2px;
padding-bottom:2px;
width:240px;
text-align:left;
}
#popLayer.Title{
font-weight:bold;
}
</style>


<Scriptlanguage="JavaScript">
tPopWait=20;
showPopStep=45;
popOpacity=90;

findParentLevel=20;

sPop=null;
curShow=null;
tFadeOut=null;

document.write("<divid='popLayer'style='position:absolute;z-index:1000;display:none'></div>");

functionisChild(o,parentObj){
if(o==parentObj)returntrue;
varobj=o;
vari=0;
while(obj&&i++<findParentLevel){
if(obj==parentObj){
returntrue;
}
obj=obj.parentElement;
}
returnfalse;
}

functioncalcAbsTop(o){
vartop=0;
varobj=o;
vari=0;
while(obj&&i++<findParentLevel){
top+=obj.offsetTop;
obj=obj.offsetParent;
}
returntop;
}

functionshowPopupText(){
varo=event.srcElement;
if(isChild(o,popLayer))returnfalse;
MouseX=event.x;
MouseY=event.y;
ClientY=calcAbsTop(o)+o.clientHeight;

if(o.tip!=null&&o.tip!=""){o.pop=o.tip;o.tip=""}
if(o.pop!=sPop){
sPop=o.pop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
if(sPop==null||sPop==""){
popLayer.style.display='none';
}else{
curShow=setTimeout("showIt()",tPopWait);
}
}
}

functionshowIt(){
popLayer.innerHTML=sPop;
popLayer.style.display='block';
popWidth=popLayer.clientWidth;
popHeight=popLayer.clientHeight;

varleft=0;
vartop=0;

if(document.body.clientWidth-MouseX>popWidth)left=MouseX+document.body.scrollLeft-4;
elseif(MouseX>=popWidth)left=MouseX+document.body.scrollLeft-popWidth;
elseleft=0;
if(document.body.clientHeight-MouseY>popHeight)top=MouseY+document.body.scrollTop-4;
elsetop=ClientY-4;

if(top<ClientY){
top=ClientY-4;
}

popLayer.style.left=left;
popLayer.style.top=top;

}

functionfadeOut(){
if(popLayer.filters.Alpha.opacity<popOpacity){
popLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
}

if(document.all){
document.οnmοuseοver=showPopupText;
}
functionwriteTip1(string1,contactWayView,consignTimeTypeView){
tipAttr='[<spanstyle="color:blue;text-decoration:underline;cursor:hand"tip="\
<tablewidth=180border=0cellspacing=0cellpadding=0bgcolor=#FFFFFF>\
<tr>\
<tdwidth=167style=\'BORDER-bottom:#FF9B301pxsolid;BORDER-top:#FF9B301pxsolid;BORDER-left:#FF9B301pxsolid;BORDER-right:#FF9B301pxsolid;\'><tablewidth=100%border=0cellspacing=0cellpadding=15>\
<tr>\
<tdclass=LL>\
<fontcolor=#FF3300>联系方式：</font>'+contactWayView+'<br>\
<fontcolor=#FF3300>付款时间：</font>'+consignTimeTypeView+'<br>\
</td>\
</tr>\
</table></td>\
<tdwidth=4valign=topbgcolor=#C4C4C4></td>\
</tr>\
</table>\
<tablewidth=180border=0cellpadding=0cellspacing=0bgcolor=#C4C4C4>\
<tr>\
<td></td>\
</tr>\
</table>">'+string1+'</span>]';
document.write(tipAttr);
}

functionwriteTip2(string1,contactWayView,consignTimeTypeView,accordantStatusView,deliverStatusView,returnServiceView){
tipAttr='[<spanstyle="color:blue;text-decoration:underline;cursor:hand"tip="\
<tablewidth=180border=0cellspacing=0cellpadding=0bgcolor=#FFFFFF>\
<tr>\
<tdwidth=167style=\'BORDER-bottom:#FF9B301pxsolid;BORDER-top:#FF9B301pxsolid;BORDER-left:#FF9B301pxsolid;BORDER-right:#FF9B301pxsolid;\'><tablewidth=100%border=0cellspacing=0cellpadding=15>\
<tr>\
<tdclass=LL>\
<fontcolor=#FF3300>联系方式：</font>'+contactWayView+'<br>\
<fontcolor=#FF3300>发货时间：</font>'+consignTimeTypeView+'<br>\
<fontcolor=#FF3300>相符程度：</font>'+accordantStatusView+'<br>\
<fontcolor=#FF3300>到达状态：</font>'+deliverStatusView+'<br>\
<fontcolor=#FF3300>退货服务：</font>'+returnServiceView+'<br>\
</td>\
</tr>\
</table></td>\
<tdwidth=4valign=topbgcolor=#C4C4C4></td>\
</tr>\
</table>\
<tablewidth=180border=0cellpadding=0cellspacing=0bgcolor=#C4C4C4>\
<tr>\
<td></td>\
</tr>\
</table>">'+string1+'</span>]';
document.write(tipAttr);
}
</Script>

</head>

<body>
这是<Scriptlanguage="JavaScript">writeTip1('测试1','手机','3天内发货');</Script><br/>
这是<Scriptlanguage="JavaScript">writeTip2('测试2','旺旺','3天内发货','相符','完好','不需要退货');</Script><br/>
这是<Scriptlanguage="JavaScript">writeTip1('测试三','123','345');</Script><br/>
这是<Scriptlanguage="JavaScript">writeTip2('测试四','旺旺','3天内发货','基本相符','完好','不需要退货');</Script>
</body>
</html>