Tips结果,纯CSS带三角可封锁的笔墨提醒

发布时间：2018-08-20 08:35:05 所属栏目：编程来源：站长网

导读：一个牛人操作JS+CSS写的多成果Tips，记不清是作者的博客地点了，在这里暗示歉仄，作者看到后，请与猛火接洽。首要成果：带小三角的笔墨提醒，可封锁，有两套颜色方案可选择，可按你的要求将表现框界说表现在四个偏向，放大或缩小赏识器窗口，不会有丝毫偏

　　一个牛人操作JS+CSS写的多成果Tips，记不清是作者的博客地点了，在这里暗示歉仄，作者看到后，请与猛火接洽。

　　首要成果：带小三角的笔墨提醒，可封锁，有两套颜色方案可选择，可按你的要求将表现框界说表现在四个偏向，放大或缩小赏识器窗口，不会有丝毫毛病。

　　殊效演示：

<!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> <script type="text/javascript"> window.ljtips=function(){var i=document.body,j=document.documentElement,n=/msies([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></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>'.replace("<%=p%>", a).replace(/<%=r%>/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}}(); </script>  <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> 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> <script type="text/javascript"> var test1 = ljtips('test1'); document.getElementById("test1").onmouseover = function(){test1.show({content:"鼠标划过期候的TIPS...<br/>兼容主流赏识器 IE 6 7 8 chorme <b>Firefox</b> <b>Opera</b> <b>Safari</b>"})}; document.getElementById("test1").onmouseout = function(){test1.hide();}; document.getElementById("test2").onfocus = function(){ljtips(this).show({content:"这个提醒会在<br/>input的上方！有个封锁按钮哦",p:'top',closeBtn:true})}; document.getElementById("test3").onmouseover = function(){ljtips(this).show({content:"我在下面呈现了！不要以为会用到图片哦！",p:'bottom',closeBtn:true})}; document.getElementById("test4").onmouseover = function(){ljtips(this).show({content:"我可以在4个偏向上",p:'left',closeBtn:true})}; document.getElementById("test5").onmouseover = function(){ljtips(this).show({content:"提醒呈现2秒后会自动消散",p:'bottom',time:2000})}; document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有封锁按钮！",p:'right'})}; document.getElementById("test7").onmouseover = function(){ljtips(this).show({content:"您可以放大可能缩小赏识器窗口！<br/>他会跟从这个绝对位置,不会有丝毫毛病。",p:'right',closeBtn:true})}; </script>  </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys