Tips 带三角可关闭的文字提示

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