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

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>tips，带三角可关闭的文字提示</title> 
</head> 
<body> 
<style type="text/css"> 
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;} 
</style> 
 
<!--这里是没有压缩的代码 window.ljtips = function(){ 
var html = "<div class=\"lj-tipswrap\" id=\"tipswrap-<%=r%>\">\ 
<div></div>\ 
<span class=\"lj-in lj-<%=p%>\"><span class=\"lj-in\"></span></span>\ 
<a href=\"javascript:void(0)\" id=\"ljclose<%=r%>\" class=\"lj-close\">x</a>\ 
</div>"; 
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 = /msie\s([\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%>",p).replace(/<%=r%>/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; 
} 
}(); 
-->

<h2>请划过或点击下面带框的文本</h2> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" id="test1">看我这里一个div</span><br> 
<input style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" value="点击我" id="test2"><br> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" id="test3">提示在我的下面出现</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" id="test4">提示在左边出现</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc;margin:30px 30px 30px 100px;" id="test5">提示出现2秒后会自动消失</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" id="test6">提示可以有关闭按钮</span><br> 
<div style="text-align:center;"> 
<span style="display:inline-block; padding:5px; border:1px solid #ccc; margin:30px 30px 30px 100px;" id="test7">不同担心页面放大缩小会位置会偏移哦</span><br> 
</div> 
<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 class="brush: javascript;"> 
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> 
 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

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

2019年07月29日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论


验证码：