zoukankan      html  css  js  c++  java
  • 悬浮提示框效果

    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);
    			}
    		}

      

  • 相关阅读:
    给JavaScript初学者的24条最佳实践
    高音符號的由來是怎樣的
    从零单排学JavaWeb
    数据库建表规则
    linux快捷键
    Linux 命令行快捷键
    DC综合及仿真验证和DFT测试
    verilog中include的用法
    <转>verilog hdl中常数声明
    <转>Verilog HDL宏定义define
  • 原文地址:https://www.cnblogs.com/z-sheng/p/4431655.html
Copyright © 2011-2022 走看看