实现效果:
实现原理：1、找到需tip打dom元素的父节点，对父节点添加相对定位，设置left，top为0；
2、tip的dom元素后创建一个同级的新节点span，进行绝对定位，设置器样式和位置就行了；
使用方法：
接口：var tipTool = function(targetElement, tipContent, instanceCss){};
参数：targetElement-需要tip的dom对象；tipContent-需要tip的内容，目前只能是string；instanceCss-自定义的tip框样式对象（有默认值）
example ： tipTool(document.getElementById("tip"),"我是提示君！",{"width":"200px","background-color":"blue"});
tipTool($(".tip1"),"我是提示君！",{"width":"200px","background-color":"blue"});
体会：前端学习过程中，自己动手写的一个小插件，代码简单，就不细细解释了。js学得不好，忘各位大神给点意见。
以下是js源码：
1 ;(function(window, undefined){ 2 3 var document = window.document; 4 5 function tipInstance(){ 6 this.instanceCss = {}; 7 this.tipContent = ""; 8 this.newElement = null; 9 } 10 11 tipInstance.prototype = { 12 defaultCss : { 13 "position":"absolute", 14 "top":"0", 15 "left":"0", 16 "display" : "inline-block", 17 "*zoom" : "1", 18 "*display" : "block", 19 "height" : "auto", 20 "width" : "auto", 21 "border" : "2px solid #18A307", 22 "z-index" : "99999999", 23 "text-align" : "center", 24 "padding" : "3px", 25 "white-space" : "nowrap", 26 "font-size" : "0.8em", 27 "font-weight" : "bold", 28 "color" : "red" 29 }, 30 addedCss : { 31 "position" : "relative", 32 "top" : "0", 33 "left" : "0" 34 }, 35 showTip : function(targetE){//展示提示窗 36 var parent = targetE.parentNode;//找到需要添加tip元素的父元素 37 38 if (parent.style.position == ""){//父级原来就有定位，则不添加 39 operTool.addCss(parent, this.addedCss);//为需tip父级元素添加相对定位 40 } 41 42 this.newElement = document.createElement("span");//创建提示元素,并存放在对象中 43 this.newElement.appendChild(this.tipContent); 44 45 operTool.addCss(this.newElement, this.instanceCss);//给提示元素添加样式 进行绝对定位 46 operTool.insertAfter(targetE, this.newElement);//将提示元素添加到目标元素之后 47 }, 48 clearTip : function(target){ 49 operTool.removeElement(target); 50 }, 51 calPosition : function(target, ev){//计算提示窗定位的位置 52 var mousePos = operTool.mouseCoords(ev);//取得当前鼠标的坐标 53 54 var ePos = operTool.offset(target);//取得当前元素坐标 55 56 this.instanceCss.top = mousePos.y - ePos.top + 10 + "px"; 57 this.instanceCss.left = mousePos.x - ePos.left + 10 + "px"; 58 }, 59 addEvent : function(target){//添加元素监听事件 60 61 var that = this; 62 63 operTool.addHandler(target,"mouseover",function(ev){ 64 ev = ev || window.event; 65 66 if (ev.stopPropagation ){//阻止冒泡 67 ev.stopPropagation(); 68 }else{ 69 ev.cancelBubble = true; 70 } 71 72 that.calPosition(target, ev); 73 that.showTip(target); 74 }); 75 76 operTool.addHandler(target,"mouseout", function(ev){ 77 ev = ev || window.event; 78 79 if (ev.stopPropagation ){//阻止冒泡 80 ev.stopPropagation(); 81 }else{ 82 ev.cancelBubble = true; 83 } 84 that.clearTip(that.newElement); 85 }); 86 87 operTool.addHandler(target,"mousemove", function(ev){ 88 ev = ev || window.event; 89 90 if (ev.stopPropagation ){//阻止冒泡 91 ev.stopPropagation(); 92 }else{ 93 ev.cancelBubble = true; 94 } 95 96 if (that.newElement != null){ 97 that.calPosition(target, ev); 98 operTool.addCss(that.newElement, that.instanceCss); 99 } 100 }); 101 }, 102 tipBind : function(targetElement, tipContent, instanceCss){//插件入口函数， 103 104 targetElement = targetElement[0] || targetElement;//兼容jQuery对象 105 106 this.addEvent(targetElement); 107 this.tipContent = document.createTextNode(tipContent); 108 this.instanceCss = operTool.extend(this.defaultCss,instanceCss); 109 } 110 }; 111 112 //内部使用的工具对象 113 var operTool = { 114 insertAfter : function(targetElement, newElement){//在元素后插入一个兄弟元素 115 var parent = targetElement.parentNode;//找到父亲节点 116 117 var lastChild; 118 if (parent.lastElementChild){ 119 lastChild = parent.lastElementChild; 120 }else{ 121 lastChild = parent.lastChild; 122 } 123 if (lastChild == targetElement){ 124 parent.appendChild(newElement); 125 }else{ 126 var nextElement; 127 if (targetElement.nextElementSibling){ 128 nextElement = targetElement.nextElementSibling; 129 }else{ 130 nextElement = targetElement.nextSibling; 131 } 132 parent.insertBefore(newElement, nextElement); 133 } 134 }, 135 addCss :function(element, cssObj){//为元素添加CSS样式 136 if (cssObj instanceof Object ){ 137 for (var key in cssObj){ 138 try{//避免用户传入的对象样式关键字错误 139 element.style[key] = cssObj[key]; 140 }catch(err){ 141 console.log(err.message); 142 } 143 } 144 }else{ 145 console.log("the second param of the function is not a object"); 146 return ; 147 } 148 149 }, 150 extend : function(obj1, obj2){//元素属性或者方法的扩展 151 var obj = {}; 152 153 for (var i in obj1){ 154 if (obj1.hasOwnProperty(i)){ 155 obj[i] = obj1[i]; 156 } 157 } 158 159 for (i in obj2){ 160 if (obj2.hasOwnProperty(i)){ 161 obj[i] = obj2[i]; 162 } 163 } 164 165 return obj; 166 }, 167 mouseCoords : function(ev){//获取鼠标位置 168 if(ev.pageX || ev.pageY){ 169 return {x:ev.pageX, y:ev.pageY}; 170 } 171 return { 172 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 173 y:ev.clientY + document.body.scrollTop - document.body.clientTop 174 }; 175 }, 176 offset : function(e){//获取一个元素距窗口顶部和左边的位置 177 var distance = {"top":0,"left":0}; 178 179 distance.top = e.offsetTop; 180 distance.left = e.offsetLeft; 181 182 if (e.offsetParent != null){ 183 var dis = this.offset(e.offsetParent); 184 distance.top += dis.top; 185 distance.left += dis.left; 186 } 187 return distance; 188 }, 189 removeElement : function(e){ 190 var parent = e.parentNode; 191 if (!parent){ 192 return; 193 } 194 try{ 195 parent.removeChild(e); 196 }catch(err){ 197 console.log(err.message); 198 } 199 }, 200 addHandler : function(ele, type, handler){ 201 if (ele.addEventListener){//主流浏览器，及ie9以上版本 202 addHandler = function(ele, type, handler){ 203 ele.addEventListener(type,handler,false); 204 } 205 }else{//ie8及以下浏览器 206 addHandler = function(ele, type, handler){ 207 ele.attachEvent("on"+type,handler); 208 } 209 } 210 addHandler(ele, type, handler); 211 } 212 }; 213 214 var tipArray = []; 215 216 window.tipTool = function(targetElement, tipContent, instanceCss){//外界访问提示插件的入口 217 tipArray[tipArray.length] = new tipInstance(); 218 tipArray[tipArray.length-1].tipBind(targetElement, tipContent, instanceCss); 219 } 220 221 })(window);
转载于:https://www.cnblogs.com/simonhui/p/4719369.html
相关资源：jquery.tip.js