ToolTip功能

最新推荐文章于 2021-03-24 08:51:56 发布

weixin_30268071

最新推荐文章于 2021-03-24 08:51:56 发布

阅读量173

点赞数

文章标签： matlab javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/lolicon/archive/2009/02/06/1385288.html

版权

直接看效果图：

使用普通的HTML属性alt只能简单地提示一些文本，如上这些复杂的功能就需要用JavaScript实现。

详细代码如下：

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
    margin: 20px;
    font: 11px "lucida granda", verdana, sans-serif;
}
#tooltip {
    width: 240px;
    background-color: #FFFACD;
    padding: 10px 10px 10px 10px;
    position: absolute;
    border: 5px solid #313131;
}
</style>
<script type="text/javascript" src="publicMethods.js"></script>
<script type="text/javascript">
var isIE = window.ActiveXObject?true:false;

function setOpacity(ele,value) {
    ele = $(ele);
    if (isIE) setStyle(ele,{"filter":"alpha(opacity:" + Math.round(value*100) + ")"});
    else setStyle(ele,{"opacity":value});
}

function getOpacity(ele) {
    ele = $(ele);
    var opacity;
    if (isIE) {
     opacity = getStyle(ele,"filter");
     opacity = parseFloat(stripAlpha(opacity))/100;
    } else {
     opacity = parseFloat(getStyle(ele,"opacity"));
    }
    return opacity;
}

var status = [];
function fadeIn(ele) {
    ele = $(ele);
    if (!status["tooltip"]) return;

    var currentOpacity = getOpacity(ele);
    if (currentOpacity >= 1) {
     setOpacity(ele,1);
     return;
    } else {
     setOpacity(ele,currentOpacity + 0.02);
     setTimeout(function (){fadeIn(ele);},20);
    }
}

function fadeOut(ele) {
    ele = $(ele);
    if (status["tooltip"]) return;

    var currentOpacity = getOpacity(ele);
    if (currentOpacity <= 0.01) {
     setOpacity(ele,0);
     setStyle("tooltip",{"display":"none"});
     return;
    } else {
     setOpacity(ele,currentOpacity - 0.02);
     setTimeout(function (){fadeOut(ele);},20);
    }
}

function showTip(evt) {//debugger;
    status["tooltip"] = true;
    setOpacity("tooltip",0.0);
    var event = window.event?window.event:evt;
    var left = event.clientX + 10;
    var top = event.clientY + 10;
    var style = {"left":left+"px","top":top+"px","display":""};
    setStyle("tooltip",style);

    fadeIn("tooltip");
}

function hideTip() {//debugger;
    status["tooltip"] = false;
    setTimeout(function (){fadeOut("tooltip");},100);
}

function stripAlpha(opacity) {
    var index = opacity.indexOf("opacity") + "opacity:".length;
    var endIndex = opacity.indexOf(",",index) == -1 ? opacity.indexOf(")",index)
            : opacity.indexOf(",",index);

    var ret = opacity.substring(index,endIndex);
    return ret;
}

function init() {
    addEventListener($("test"),"mouseover",showTip);
    addEventListener($("test"),"mouseout",hideTip);
    addEventListener($("tooltip"),"mouseover",function(){status["tooltip"]=true;});
    addEventListener($("tooltip"),"mouseout",hideTip);
}
</script>
</head>

<body onload="init()">
    <a href="#" id="test">Test</a>
    <div id="tooltip" style="display:none;">
    <h3>ToolTip</h3>
    <img src="gl.jpg" />
    <p>这是使用JavaScript实现的工具提示功能。</p>
    </div>
</body>
</html>

公共函数：

Code

    function $(id) {
        return (typeof id == "string")? document.getElementById(id):id;
    }

    function setStyle(ele,style) {
      ele = $(ele);
      for (p in style)
        {ele.style[p] = style[p];}
    }

    function getStyle(ele,name) {
    var style = ele.currentStyle?ele.currentStyle:document.defaultView.getComputedStyle(ele,null);
    return style[name];
    }

    function addEventListener(ele,type,func) {
    if (ele.addEventListener)  ele.addEventListener(type,func,false);
    else ele.attachEvent("on"+type,func);
    }

转载于:https://www.cnblogs.com/lolicon/archive/2009/02/06/1385288.html

weixin_30268071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ToolTip功能

直接看效果图：使用普通的HTML属性alt只能简单地提示一些文本，如上这些复杂的功能就需要用JavaScript实现。详细代码如下：Code<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
复制链接

扫一扫