鼠标跟随提示框的功能设计代码
程序员文章站
2022-12-08 12:57:29
鼠标跟随提示框的功能设计代码
&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> 上一篇： Form表单 JSON Content-type解析
下一篇： 浅析JS抽象工厂模式