Js实现ToopTip

最新推荐文章于 2023-11-21 11:41:37 发布

weixin_34315189

最新推荐文章于 2023-11-21 11:41:37 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangh/archive/2007/12/07/986508.html

版权

Js实现ToopTip

浏览器中实现ToopTip,高兼容性。

<html>
<head>

    if(ns4)
    {
      toolTipSTYLE.document.write(content);
      toolTipSTYLE.document.close();
      toolTipSTYLE.visibility = "visible";
    }
    if(ns6)
    {
      document.getElementById("toolTipLayer").innerHTML = content;
      toolTipSTYLE.display='block'
    }
    if(ie4)
    {
      document.all("toolTipLayer").innerHTML=content;
      toolTipSTYLE.display='block'
      //--图象过渡，淡入处理--
      var cssopaction=document.all("msg1").filters[0].opacity
      document.all("msg1").filters[0].opacity=0;
      if (rT) document.all("msg1").filters[1].Apply();
      if (bT) document.all("msg1").filters[2].Apply();
      document.all("msg1").filters[0].opacity=cssopaction;
      if (rT) document.all("msg1").filters[1].Play();
      if (bT) document.all("msg1").filters[2].Play();
      //----------------------
    }
}
}
function moveToMouseLoc(e)
{
if(ns4||ns6)
{
    x = e.pageX;
    y = e.pageY;
}
else
{
    x = event.x + document.body.scrollLeft;
    y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY;
return true;
}

</script>
<style type="text/css">

</style>
</head>
<body>
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div><script>initToolTips()</script>
<a id="Hyperlink1" class="word" NAME="Hyperlink1" onMouseOut="toolTip()" onMouseOver="toolTip('博客园.Net技术交流平台','#000000','#ffffe1')" href="ksdtxx_detail.aspx?BoardID=179">博客园</a>
</body>
</html>

----------------------------------------------------------------------------------------------------
tooptip,这个版本比较好看
    function ToolTip()
    {
    }

    ToolTip.Items = [];

    ToolTip.Add = function(tip)
    {
        this.Items.push(tip);
    };

    ToolTip.Init = function()
    {
        for(var i=0; i<this.Items.length; ++i)
        {
            var tip = this.Items[i];
            var obj = document.getElementById(tip.ID);
            obj.Object = tip;
            obj.timer = null;

            obj.onmousemove = function(evt)
            {
                var o = this.Object;
                if( o.Tip == null )
                {
                    var div = document.createElement("DIV");
                    div.id = "toolTip";
                    if(!o.Border) o.Border = "solid 2px ";
                    if(!o.BorderColor) o.BorderColor = "red";
                    if(!o.BgColor) o.BgColor = "white";
                    if(!o.Color) o.Color = "black";
                    div.innerHTML = o.Text;

                    with(div.style)
                    {
                        border = o.Border + o.BorderColor;
                        backgroundColor = o.BgColor;
                        position = "absolute";
                        display = "none";
                        padding = "5px";
                        fontSize = "9pt";
                        textAlign = "left";
                        color = o.Color;
                    }

tip = new Tip("Hyperlink2", "博客园2");
ToolTip.Add(tip);

ToolTip.Init();
</script>

转载于:https://www.cnblogs.com/zhangh/archive/2007/12/07/986508.html

weixin_34315189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js实现ToopTip

Js实现ToopTip浏览器中实现ToopTip,高兼容性。<html><head><script>/*舜子制作Made by PuterJam*///--初始化变量--var rT=true;//允许图像过渡var bT=true;//允许图像淡入淡出var tw=300;//提示框宽度var endaction=false;//结束动画var n...
复制链接

扫一扫