欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

鼠标跟随提示框的功能设计代码

程序员文章站 2022-05-18 23:49:59
鼠标跟随提示框的功能设计代码 &l...

鼠标跟随提示框的功能设计代码

<!DOCTYPE html>     
<html>     
<head>     
    <title>鼠标跟随提示框</title>       
    <meta charset="utf-8">    
    <style type="text/css">     
        body{ font-family: "Microsoft YaHei", Helvetica, arial, freesans, clean, sans-serif !important; }     
        a,a:visited{  color:#3366cc;  text-decoration:none; }     
        a:hover{  color:#f60;  text-decoration:underline;  }     
        .tip{  width:200px; border:2px solid #ddd;  padding:2px;  background:#f1f1f1;  color:#666; max-height: 60px;line-height: 20px;overflow: hidden; }     
        img{  border:0;  }     
    </style>     
    <script type="text/javascript">     
        var tip={     
            $:function(ele){     
                if(typeof(ele)=="object")     
                    return ele;     
                else if(typeof(ele)=="string"||typeof(ele)=="number")     
                    return document.getElementById(ele.toString());     
                return null;     
            },     
            mousePos:function(e){     
                var x,y;     
                var e = e||window.event;     
                return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,     
                        y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};     
                },     
            start:function(obj){     
                var self = this;     
                var t = self.$("show");     
                obj.onmousemove=function(e){     
                    var mouse = self.mousePos(e);       
                    t.style.left = mouse.x + 20 + 'px';     
                    t.style.top = mouse.y + 20 + 'px';     
                    t.innerHTML = obj.getAttribute("tips");     
                    t.style.display = '';     
                };     
                obj.onmouseout=function(){     
                    t.style.display = 'none';     
                };     
            }     
        }     
  
  
    /*    if (window.pageXOffset !== undefined) {  // 所有浏览器，除了 IE9 及更早版本  
        alert("水平滚动: " + window.pageXOffset   
        + ", 垂直滚动: " + window.pageYOffset);  
    } else {   // IE9 及更早版本  
        alert("水平滚动: " + document.documentElement.scrollLeft   
        + ", 垂直滚动: " + document.documentElement.scrollTop);  
    }*/  
    </script>     
</head>     
<body>      
    <a href="#" target="_blank" onmouseover="tip.start(this)" tips="新华社北京3月13日电十三届全国人大一次会议13日上午在人民大会堂举行第四次全体会议，听取全国人大常委会关于监察法草案的说明、国务院关于国务院机构改革方案的说明。">十三届全国人大一次会议举行第四次全体会议</a>  
    <p id="show" class="tip" style="position:absolute;left:0;top:0;display:none;"></p>     
</body>     
</html>

上一篇： 如何将炖蛋做的又滑又嫩

下一篇： ES6数组扩展常用的方法讲解

推荐阅读