您的位置：首页 > 其它

鼠标跟随提示框

2018-03-14 01:34 295 查看

<!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>
<div id="show" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航