单元行上的鼠标悬停提示 【js读书笔记】

 

单元行上的鼠标悬停提示

1	2
3	4

 

<script type="text/javascript">
		window.onload=function(){
			var 
				setCss=function(_this,cssOption){
					if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
						return;
					}
					for(var cs in cssOption){
						_this.style[cs]=cssOption[cs];
					}
					return _this;
				},
				_mousepos={
					"top":0,
					"left":0
				},
				/*获取鼠标在页面的位置
				 _e:触发的事件
				 left:鼠标在页面上横向位置
				 top:鼠标在页面上的纵向位置*/
				getMousePoint=function(_e){
					var _body=document.dody,
						_left=0,
						_top=0;
					/*如果浏览器支持pageYOffset,那么可以使用pageXOffset 和 pageYOffset
					 获取页面和视窗之间的距离*/
					if(typeof window.pageXOffset!='undefined'){
						_left=window.pageXOffset;
						_top=window.pageYOffset;
					}else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){/*如果浏览器制定了DOCTYPE并支持compatMode*/
						_left=document.documentElement.scrollLeft;
						_top=document.documentElement.scrollTop;
					}else if(typeof _body!='undefined'){/*如果浏览器支持adocument.body*/
						_left=_body.scrollLeft;
						_top=_body.scrollTop;
					}
					_left+=_e.clientX;
					_top+=_e.clientY;
					_mousepos.left=_left;
					_mousepos.top=_top;
					return _mousepos;					
				},
				/*参数——e被绑定的节点:tooltipMsg显示信息的节点*/
				tooltip=function(e,tooltipMsg){
					var trE=e.rows,//获取被遍历的tr节点对象
						trLen=trE.length,//获取被遍历的节点长度
						i=0;
					for(;i<trLen;i++){
						var trEi=trE[i],
							dataTooltip=trEi.getAttribute("data-tooltip");//获取数据
						if(dataTooltip){//如果纯在data-tooltip数据则绑定响应事件
							trEi.onmousemove=function(event){//显示信息提示
								event=event||_W.event;
								var _pos=getMousePoint(event);
								//修正提示信息的坐标
								tooltipMsg.innerHTML=this.getAttribute("data-tooltip");
								setCss(tooltipMsg,{
									"left":_pos.left+"px",
									"top":(_pos.top+18)+"px",
									"display":"inline"
								});
							}
							
							trEi.onmouseout=function(){
								setCss(tooltipMsg,{
									"display":"none"
								});
							}
							
						}
					}
				};
			tooltip(document.getElementById("tooltip"),
			document.getElementById("tooltipMsg"));
		};
	</script>

　　

提示信息