当前位置： 移动技术网 > IT编程>网页制作>CSS > 鼠标跟随提示框的功能设计代码

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

2018年03月15日  | 移动技术网IT编程  | 我要评论

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

<!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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网