Tips 带三角可关闭的文字提示_布局与层-js教程-PHP中文網

Tips 带三角可关闭的文字提示_布局与层

WBOY

發布： 2016-05-16 18:18:57

原創

1262 人瀏覽過

/*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> 
<script type="text/javascript"> 
window.ljtips=function(){var i=document.body,j=document.documentElement,n=/msie\s([\d\.]+)/.test(navigator.userAgent.toLowerCase()),k=window;return function(l){var c=l?typeof l=="string"?document.getElementById(l):l:this,d=null,s=c.offsetWidth,t=c.offsetHeight,m=0,g=null,e={},o={left:function(a){return{top:d.top,left:d.left-a-15}},top:function(a,h){return{top:d.top-h-15,left:d.left}},right:function(){return{top:d.top,left:d.left+s+15}},bottom:function(){return{top:d.top+t+15,left:d.left}}};e.show= 
function(a){if(c.lock)c.lock=false;else{c.lock=true;d=c.getBoundingClientRect();var h=i.scrollTop+j.scrollTop,f=i.scrollLeft+j.scrollLeft;a.p=a.p||"right";var b=e.append(a.p,a.closeBtn||false);b.getElementsByTagName("DIV")[0].innerHTML=a.content;var p=o[a.p](b.offsetWidth,b.offsetHeight);b.style.top=p.top+h+"px";b.style.left=p.left+f+"px";a.time&&setTimeout(function(){e.clear(document.getElementById("lj"+m))},a.time);a.fn&&a.fn.call(c,document.getElementById("lj"+m));g=function(w,q){return function(){var u= 
i.scrollTop+j.scrollTop,v=i.scrollLeft+j.scrollLeft;d=c.getBoundingClientRect();var r=o[a.p](b.offsetWidth,b.offsetHeight);q.style.top=r.top+u+"px";q.style.left=r.left+v+"px"}}(c,b);n?k.attachEvent("onresize",g):k.addEventListener("resize",g,false)}};e.append=function(a,h){var f=m=Math.floor(Math.random()*1E4),b=document.createElement("DIV");b.id="lj"+f;b.innerHTML='<div class="lj-tipsWrap" id="tipsWrap-<%=r%>"><div></script>

x'.replace("", a).replace(//g,f);document.body.appendChild(b);if(h)document.getElementById("ljClose"+f).onclick=e.hide;else document.getElementById("ljClose"+f).style.display="none";return document.getElementById("tipsWrap-"+f)};e.clear=function(a){a&&a.parentNode&&a.parentNode.removeChild(a);n?k.detachEvent("onresize",g):k.removeEventListener("resize",g,false);c.lock=false};e.hide=function(){e.clear(document.getElementById("lj"+m))};return e}}();

请划过或点击下面带框的文本

看我这里一个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
在行内调用提示框"
"
使用3
在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有关闭按钮！",p:'right'})};

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]