Tips，带三角可关闭的文字提示 body{ font-size:12px;} .lj-tipsWrap,.lj-in,.lj-close{display:inline-block;} .lj-tipsWrap{background:#F4FBFF;line-height:1.5em;padding:5px 15px;border:1px solid #2192D3;position:absolute;text-align:left;} .lj-in{position:absolute;zoom:1;border:10px dashed transparent;width:0px;height:0px;} .lj-in span{zoom:1;width:0px;height:0px;overflow:hidden;} .lj-close{position:absolute; text-decoration:none;color:#000;font-size:14px; height:9px; width:9px; overflow:hidden;line-height:0.5em; right:0; top:0;} .lj-close:hover{color:#39F;} .lj-top{border-top:10px solid #2192D3;bottom:-20px; left:3px;} .lj-top span{border-top:10px solid #F4FBFF;margin:-11px 0 0 -10px;} .lj-right{border-right:10px solid #2192D3;left:-20px; top:3px;} .lj-right span{border-right:10px solid #F4FBFF;margin:-10px 0 0 -9px;} .lj-bottom{border-bottom:10px solid #2192D3;top:-20px; left:3px;} .lj-bottom span{border-bottom:10px solid #F4FBFF;margin:-9px 0 0 -10px;} .lj-left{border-left:10px solid #2192D3;right:-20px; top:3px; } .lj-left span{border-left:10px solid #F4FBFF;margin:-10px 0 0 -11px;} .lj-left ~ .lj-close{left:0;} /*css 3 渐进增强*/ .lj-tipsWrap{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:2px 2px 3px #eee;-moz-box-shadow:2px 2px 3px #eee;} "> "> " class="lj-close">x "; var dg = function(id){return document.getElementById(id);}; var dt = function(parent, nodeName){return parent.getElementsByTagName(nodeName);}; var db = document.body; var dd = document.documentElement; var of = 15;// 偏移量 var prefix = 'lj';// 前缀 var isie = /msies([d.]+)/.test(navigator.userAgent.toLowerCase()); var w = window; var lock = true;// 锁定同一对象 多次弹出提示 return function(id){ var elem = id ? typeof id == "string" ? dg(id) : id : this; var offset = null; var width = elem.offsetWidth; var height = elem.offsetHeight; var rand = 0;// 随即值 var func = null;// 窗口变化绑定的函数 var _this = {}; var pos = { left : function(w, h){return {top:offset.top , left:offset.left - w - of}}, top : function(w, h){return {top:offset.top - h - of, left:offset.left}}, right : function(w, h){return {top:offset.top , left:offset.left + width + of}}, bottom : function(w, h){return {top:offset.top + height + of , left:offset.left}} }; _this.show = function(obj){ if(elem.lock){ elem.lock=false;return; }else elem.lock=true; offset = elem.getBoundingClientRect(); var top = db.scrollTop + dd.scrollTop; var left= db.scrollLeft + dd.scrollLeft; obj.p = obj.p || 'right'; var wrap = _this.append(obj.p, obj.closeBtn || false); dt(wrap, "DIV")[0].innerHTML = obj.content; var p = pos[obj.p](wrap.offsetWidth,wrap.offsetHeight); wrap.style.top = p.top + top + "px"; wrap.style.left = p.left + left + "px"; obj.time && setTimeout(function(){_this.clear(dg(prefix+rand));}, obj.time); obj.fn && obj.fn.call(elem, dg(prefix+rand)); //--检测窗口发生变化 func = function(a, b){ return function(){ var top = db.scrollTop + dd.scrollTop; var left= db.scrollLeft + dd.scrollLeft; offset = elem.getBoundingClientRect(); var c = pos[obj.p](wrap.offsetWidth, wrap.offsetHeight); b.style.top = c.top + top + 'px'; b.style.left = c.left + left + 'px'; } }(elem, wrap); isie ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false); } _this.append = function(p,closeBtn){ var r = rand = Math.floor(Math.random() * 10000); var x = document.createElement("DIV"); x.id = prefix + r; x.innerHTML = html.replace("",p).replace(//g,r); document.body.appendChild(x); if(closeBtn){ dg("ljClose"+r).onclick = _this.hide; }else{ dg("ljClose"+r).style.display = "none"; } return dg("tipsWrap-" + r); } _this.clear = function(a){ a && a.parentNode && a.parentNode.removeChild(a); isie ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false); elem.lock = false;// 解除锁定 } _this.hide = function(){ _this.clear(dg(prefix + rand)); } return _this; } }(); --> 请划过或点击下面带框的文本 看我这里一个DIV 提示在我的下面出现 提示在左边出现 提示出现2秒后会自动消失 提示可以有关闭按钮 不同担心页面放大缩小会位置会偏移哦 优点 1：兼容 各种浏览器 2：自己定义TIPS样式(颜色),CSS3渐进增强 3：多方向弹出提示 4：纯CSS+javascript(不包含任何图片) 5：体积超级小 CSS+js = 3k 参数配置 ljtips(object).show(JSON) object: DOM对象ID(test1), DOM对象 json:{ content:提示的消息内容(必须), p:提示框位置(可选值top left bottom right),默认为right(可选), closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), time:多少毫秒提示框消失(可选) } 使用说明 主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide; 使用1 首先实例化一个ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON) 使用2 在行内调用提示框"<div onclick=" ljtips(this).show(JSON); "></div>" 使用3 在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有关闭按钮！",p:'right'})}; [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript访问样式表代码

比如：当我们将鼠标移动到一个图标上的时候，图标会出现一些动画效果（渐变放大、闪动、更换颜色等），而这一切的友好效果基本上都跟样式（style）有关，所以这一篇，我学习JavaScript对style的操作。技术关键点：>>>详细阅读

本文标题：Tips 带三角可关闭的文字提示

地址：http://www.17bianji.com/kaifa2/JS/25643.html

 1/2    1