仿淘宝的tips效果

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

piperzero

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

阅读量1.4k

点赞数

分类专栏：网站建设文章标签： javascript border string null 测试网络

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

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

<style type="text/css" media="screen">
body{
    font-size: 12px;
}
#popLayer {
        background-color: #FFFFCC;
        border: 1px #000000 solid;
        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>


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

findParentLevel = 20;

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

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

function isChild(o, parentObj) {
    if (o == parentObj) return true;
    var obj = o;
    var i = 0;
    while (obj && i++ < findParentLevel) {
        if (obj == parentObj) {
            return true;
        }
        obj = obj.parentElement;
    }
    return false;
}

function calcAbsTop(o) {
    var top = 0;
    var obj = o;
    var i = 0;
    while (obj && i++ < findParentLevel) {
        top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return top;
}

function showPopupText(){
    var o=event.srcElement;
    if (isChild(o, popLayer)) return false;
    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);
        }
    }
}

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

    var left = 0;
    var top = 0;

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

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

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

}

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

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

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

</head>

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