鼠标滑过提示效果 tooltip

现在tooltip一类的东西用得很多，例如人人网，淘宝网等等都有很多的应用，自己也试着实现了一下。

　　其实原理也非常的简单，当鼠标进入选定区域的时候，弹出一层即可，通过获取的鼠标的x，y坐标来设置弹出层的位置，

这里要同时设置三个事件的函数才行，

页面源码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <style type="text/css">
        #content{
            text-align:center;
            background-color:#00FF99;
            font-size:13px;
            padding:25px;
            height:80px;
            width:100%;
            margin:0px;
            cursor:pointer;
        }
        #toolTip{
            height:100px;
            width:100px;
            border:8px solid #009900;
            background-color:#999999;
            opacity:.5;
            display:none;
            position:absolute;
            margin:0px;
            padding:0px;
            text-align:center;
        }
    </style>
    
    <script type="text/javascript">
    
        function $(sId){
            return document.getElementById(sId); 
        }
        function createTooltip(){
            $("content").onmouseover=function(ev){
                var ev = ev || window.event ;
                $("toolTip").style.top = ev.clientY + 'px' ;
                $("toolTip").style.left = ev.clientX + 'px' ;
                $("toolTip").style.display = 'block' ;
            }
            $("content").onmousemove=function(ev){
                var ev = ev || window.event ;
                $("toolTip").style.top = ev.clientY +10+ 'px' ;
                $("toolTip").style.left = ev.clientX +5+ 'px' ;
            }
            $("content").onmouseout=function(){
                $("toolTip").style.display = 'none' ;
            }
        }
        
        window.onload=createTooltip;
    </script>

</head>

<body>
    <div id="content">
        这是内容
    </div>
    <div id="toolTip">
        aaaa
    </div>
</body>
</html>

posted on 2011-12-03 21:44 fjs_cloud 阅读(383) 评论(0) 收藏举报

刷新页面返回顶部

鼠标滑过提示效果 tooltip

导航

公告