悬浮提示框效果

最新推荐文章于 2024-04-10 18:00:00 发布

weixin_30649641

最新推荐文章于 2024-04-10 18:00:00 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/z-sheng/p/4431655.html

var IeAuto = navigator.userAgent.indexOf('MSIE') > -1;   //判断是不是Ie浏览器  并赋值给变量
		window.onload=function(){
			function show(obj,id,html,width,height){
										
				if(document.getElementById(id)==null){   //判断创建出来的div的id是否为空
					var div = document.createElement('div'); 	//创建div
					div.className = 'tooltip-box';				//给创建的div 添加一个 classs
					div.id = id;								//给创建的div 添加一个 id
					div.innerHTML = html;						//创建div显示的内容 
					div.style.width = width?width+'px':'auto';  //设置div宽度  IE不支持 atuo
					
					
					if(!width && IeAuto){  //如果 没有设置宽度并且是ie浏览器
						div.style.width = div.offsetWidth;      //在没有设置宽度和不支持auto的ie浏览器下  将div宽度设置成浏览器渲染出来的宽度
					}
					
					obj.appendChild(div);						//讲div插入在obj对象里面 （就是a标签）
					div.style.position = 'absolute';			//给创建出来的div 一个绝对定位属性
					
					//设置提示框的边界
					var win = document.body.clientWidth||document.documentElement.clientWidth;
					
					var l = obj.offsetLeft,						//获取a标签的left top值
						t = obj.offsetTop;

					if(l+div.offsetWidth > win ){               //obj left值与提示框宽度的值 > 浏览器窗口值
						var dmo = document.getElementById('demo');
						l = win - div.offsetWidth - dmo.offsetLeft;	
						
						if(l<0){l=0 }
					}
					div.style.left = l + 'px';                   //创建出来的div 的left top值 等于 a标签的left top值
					div.style.top = (t+20) + 'px';
					obj.onmouseleave=function(){                 //鼠标离开的时候 div 隐藏  setTimeout 延时效果
						setTimeout(function(){                
							document.getElementById(id).style.display = 'none';	
						},300);	
					}
				}else{
					//显示
						document.getElementById(id).style.display = 'block';	
				}	
			};
			var t1 = document.getElementById('tooltip1');
			t1.onmouseenter=function(){
				show(this,'t1','12334',200);
			}
		}

转载于:https://www.cnblogs.com/z-sheng/p/4431655.html