另外，如果一个页面里面需要用到不用种类的框，可以多创建几个实例。在每一次进行实例化的时候，会为对象设置一个这样的id：'Info-preview-' + (new Date()).getTime()，理论上，这样会造成id重复，当计算机速度足够快的时候，在1毫秒内能创建多个实例的话，bug就出现了，应该再添加一个序号。因为在实践中没有出现1毫秒能创建多个实例的情况，就没作修改。　在写代码的时候，我发现当弹框出现在头像上方的时候不太好处理css，因为框的定位属性是left跟top，也就是必须计算框本身的高度才能准确定位，而在框display='block'之前是无法计算offsetHeight的，也就无法确定top了，无法确定top，不确定top那显示出来必然会错位，好像很矛盾。后来采用了一种取巧的方法，使用两次setCss()方法，第一次setCss()可以得到框的offsetHeight，而top值没有定义，再执行一次setCss()，把刚才的offsetHeight取到重新计算一下top，这下定位就准了。而这个过程十分迅速，第一次的setCss()根本就察觉不到。到现在，定位问题解决了，如果是用Ajax来获取内容填充到框里，务必要在ajax过程结束之后来一次setCss()修正一下定位，否则会造成框内容突然出现，高度增加，把头像给遮挡住。　

　效果：

　以下是这个名片框的js代码，可以拷贝到任何页面使用：

  1 /*******************************  2  *  3  *    通用的NameCardBox小模块  4  *  5  *******************************/  6   7 function NameCardBox() {  8     this.initialize.apply(this, arguments);  9 } 10  11 NameCardBox.prototype = { 12     /* 13      *    targetObj:欲使用此名片功能的node节点的集合 14      *    innerNode:在box中装入的节点集合 15      *    width : 一个数字，描述提示框的宽度 16      *    offsetFix : 小箭头的偏移量修正值 17      *    注意：targetObj与innerNode要按顺序一一对应 18 　　　*/ 19     initialize : function(targetObj, innerNode, width, offsetXFix, offsetYFix) { 20         var _this = this; 21         this.id = 'Info-preview-' + (new Date()).getTime(); 22         this.creatElement(); 23         this.wrapper = document.getElementById(this.id); 24         this.wrapper2 = this.wrapper.getElementsByTagName('div')[0]; 25         this.bg = this.wrapper.getElementsByTagName('div')[1]; 26         this.content = this.wrapper.getElementsByTagName('div')[2]; 27         this.arrow = this.wrapper.getElementsByTagName('div')[3]; 28         this.width = width + 'px'; 29         this.borderWidth = 4; 30         this.target = targetObj; 31         this.inner = innerNode; 32         this.directionFlag 33         this.direction = []; 34         this.timer = null; 35         this.option = { 36             'top' : '-1px', 37             'bottom' : '-23px', 38             'left' : '-45px', 39             'right' : '-70px' 40         }; 41         this.offsetXFix = offsetXFix || 0; 42         this.offsetYFix = offsetYFix || 0; 43         this.initCss(); 44         this.addEvent(this.directionFlag); 45         this.wrapper.onmouseover = function() { 46             _this.doKeep(); 47         } 48         this.wrapper.onmouseout = function() { 49             _this.doHide(); 50         } 51     }, 52     //创建box的HTML代码 53     creatElement : function(inner) { 54         var d = document; 55         var wrapper = d.createElement('div'); 56         var wrapper2 = d.createElement('div'); 57         var bg = d.createElement('div'); 58         var content = d.createElement('div'); 59         var arrow = d.createElement('div'); 60         content.innerHTML = "</ br></ br></ br></ br></ br></ br>"; 61         wrapper.setAttribute('id', this.id); 62         wrapper2.appendChild(bg); 63         wrapper2.appendChild(content); 64         wrapper2.appendChild(arrow); 65         wrapper.appendChild(wrapper2); 66         document.body.appendChild(wrapper); 67     }, 68     //计算箭头应该出现的方向以及box放置的方位 69     getDirection : function(event) { 70         var event = window.event || event; 71         var X = event.clientX; 72         var Y = event.clientY; 73         var screenH = screen.availHeight; 74         var screenW = screen.availWidth; 75         if(X / screenW < 0.25 || X / screenW >= 0.75) { 76             this.directionFlag = false; 77         } else { 78             this.directionFlag = true; 79         } 80         if(this.directionFlag === true) { 81             this.direction[0] = 'top'; 82             this.direction[1] = Y / screenH; 83         } else { 84             this.direction[0] = 'left'; 85             this.direction[1] = X / screenW; 86         } 87     }, 88     //为对象绑定box事件 89     addEvent : function() { 90         var _this = this; 91         var obj = this.target; 92         if( typeof obj === 'object' && typeof obj.length === 'number') { 93             for(var i = 0; i < obj.length; i++) { 94                 obj[i].setAttribute('NameCard', i); 95                 obj[i].onmouseover = function() { 96                     _this.getDirection(event); 97                     //第一次获取定位 98                     _this.getPosition(this, _this);100                     _this.content.innerHTML = _this.inner[this.getAttribute('NameCard')].innerHTML;101                     //尝试显示102                     _this.doShow(this);103                     //获取修正后的定位104                     _this.getPosition(this, _this);105                     //再次显示106                     _this.doShow(this);107                     _this.doKeep();108                 }109                 obj[i].onmouseout = function() {110                     _this.doHide();111                 }112             }113         } else if( typeof obj == 'object' && !( obj instanceof Array)) {114             obj.onmouseover = function() {115                 _this.getDirection(event);116                 //第一次获取定位117                 _this.getPosition(this, _this);118                 _this.content.innerHTML = this.getAttribute('data');119                 //尝试显示120                 _this.doShow(this);121                 //获取修正后的定位122                 _this.getPosition(this, _this);123                 //再次显示124                 _this.doShow(this);125                 _this.doKeep();126             }127             obj.onmouseout = function() {128                 _this.doHide()129             };130         } else131             throw Error('type error!');132     },133     doShow : function(obj) {134         //第一次设置CSS，本次无法预知框的高度135         this.setCss(obj);136         this.wrapper.style.display = 'block';137         //根据实际情况修正一次CSS（根据高度修正）138         this.setCss(obj);139     },140     doHide : function() {141         var _this = this;142         this.timer = setTimeout(function() {143             _this.wrapper.style.display = 'none';144         }, 300);145     },146     doKeep : function() {147         if(this.timer != null) {148             clearTimeout(this.timer);149         }150     },151     //给整个框赋予基本的CSS152     initCss : function() {153         var w = this.wrapper;154         var w2 = this.wrapper2;155         var bg = this.bg;156         var c = this.content;157         var a = this.arrow;158         w.style.cssText = 'position:absolute;display:none';159         w2.style.cssText = 'position:relative';160         c.style.cssText = 'position:absolute;padding:10px;background:#FFF;opacity:1;z-index:2;border: 1px solid #bbb;';161         bg.style.cssText = 'left:-4px;top:-4px;background-color: #000;opacity:0.1;position:absolute;z-index:1;filter:alpha(opacity=10)';162         a.style.cssText = 'height:25px;width:25px;position:absolute;left:30px;top:-17px;z-index:2;background-image: url(/images/InfoPreviewBox_arrow.png);background-repeat: no-repeat;background-position-x: -1px; background-position-y: -1px;';163         c.style.width = this.width || '281px';164     },165     //用来给箭头位置、半透明边框定位166     setCss : function(obj) {167         var w = this.wrapper;168         var bg = this.bg;169         var arrow = this.arrow;170         var aFixX = 30 + this.offsetXFix + 'px';171         var aFixY = 30 + this.offsetYFix + 'px';172         var contentW = this.content.offsetWidth;173         var contentH = this.content.offsetHeight;174         bg.style.width = this.content.offsetWidth + this.borderWidth * 2 + 'px';175         bg.style.height = this.content.offsetHeight + this.borderWidth * 2 + 'px';176         bg.style.left = 0 - this.borderWidth;177         bg.style.top = 0 - this.borderWidth;178         w.style.left = obj.getAttribute('css-left') + 'px';179         w.style.top = obj.getAttribute('css-top') + 'px';180 181         if(this.direction[0] === 'left') {182             if(this.direction[1] < 0.5) {183                 arrow.style.backgroundPositionY = this.option.left;184                 arrow.style.left = '-20px';185                 arrow.style.top = aFixY;186             } else {187                 arrow.style.backgroundPositionY = this.option.right;188                 arrow.style.left = this.content.offsetWidth - 11 + 'px';189                 arrow.style.top = aFixY;190             }191         } else {192             if(this.direction[1] > 0.5) {193                 arrow.style.backgroundPositionY = this.option.bottom;194                 arrow.style.left = aFixX;195                 arrow.style.top = this.content.offsetHeight - 4 + 'px';196             } else {197                 arrow.style.backgroundPositionY = this.option.top;198                 arrow.style.left = aFixX;199                 arrow.style.top = '-17px';200             }201         }202     },203     //设置box的定位信息204     getPosition : function(obj, _this) {205         var offsetLeft = obj.getBoundingClientRect().left;206         var clientOffsetTop = document.documentElement.scrollTop || document.body.scrollTop;207         var offsetTop = obj.getBoundingClientRect().top + clientOffsetTop;208         var leftR = offsetLeft - parseInt(this.width) - 35;209         var leftL = offsetLeft + obj.offsetWidth + 15;210         var leftB = offsetTop;211         var topL = offsetLeft;212         var topB = offsetTop + obj.offsetHeight + 15;213         var topT = offsetTop - _this.content.offsetHeight - 15;214         if(this.direction[0] === 'left') {215             if(this.direction[1] < 0.5) {216                 obj.setAttribute('css-left', leftL);217                 obj.setAttribute('css-top', leftB);218             } else {219                 obj.setAttribute('css-left', leftR);220                 obj.setAttribute('css-top', leftB);221             }222         } else {223             if(this.direction[1] > 0.5) {224                 obj.setAttribute('css-left', topL);225                 obj.setAttribute('css-top', topT);226             } else {227                 obj.setAttribute('css-left', topL);228                 obj.setAttribute('css-top', topB);229             }230         }231     }232 }