Tips帶三角可關(guān)閉的文字提示_布局與層

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:55:08

Tips帶三角可關(guān)閉的文字提示_布局與層

Tips帶三角可關(guān)閉的文字提示_布局與層: Tips，帶三角可關(guān)閉的文字提示 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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Tips帶三角可關(guān)閉的文字提示_布局與層: Tips，帶三角可關(guān)閉的文字提示 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

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tips，帶三角可關(guān)閉的文字提示</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 漸進(jìn)增強(qiáng)*/ 
.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> 
</pre></li> 
 
<h3>使用說(shuō)明</h3> 
 
<li>主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;</li> 
<li>使用1</li> 
<li>首先實(shí)例化一個(gè)ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)</li> 
<li>使用2</li> 
<li>在行內(nèi)調(diào)用提示框""</li> 
<li>使用3</li> 
<li>在JS里調(diào)用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"這個(gè)框你關(guān)不掉了吧！沒(méi)有關(guān)閉按鈕！",p:'right'})};</li> 
 
<script type="text/javascript"> 
var test1 = ljtips('test1'); 
document.getElementById("test1").onmouseover = function(){test1.show({content:"鼠標(biāo)劃過(guò)時(shí)候的TIPS...<br>兼容主流瀏覽器 IE 6 7 8 chorme Firefox Opera Safari"})}; 
document.getElementById("test1").onmouseout = function(){test1.hide();}; 
document.getElementById("test2").onfocus = function(){ljtips(this).show({content:"這個(gè)提示會(huì)在<br>input的上方！有個(gè)關(guān)閉按鈕哦",p:'top',closeBtn:true})}; 
document.getElementById("test3").onmouseover = function(){ljtips(this).show({content:"我在下面出現(xiàn)了！不要認(rèn)為會(huì)用到圖片哦！",p:'bottom',closeBtn:true})}; 
document.getElementById("test4").onmouseover = function(){ljtips(this).show({content:"我可以在4個(gè)方向上",p:'left',closeBtn:true})}; 
document.getElementById("test5").onmouseover = function(){ljtips(this).show({content:"提示出現(xiàn)2秒后會(huì)自動(dòng)消失",p:'bottom',time:2000})}; 
document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"這個(gè)框你關(guān)不掉了吧！沒(méi)有關(guān)閉按鈕！",p:'right'})}; 
document.getElementById("test7").onmouseover = function(){ljtips(this).show({content:"您可以放大或者縮小瀏覽器窗口！<br>他會(huì)跟隨這個(gè)絕對(duì)位置,不會(huì)有絲毫偏差。",p:'right',closeBtn:true})}; 
</ script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Tips帶三角可關(guān)閉的文字提示_布局與層

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：三角 tips 可關(guān)閉

熱門焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

Tips帶三角可關(guān)閉的文字提示_布局與層

Tips帶三角可關(guān)閉的文字提示_布局與層

Tips帶三角可關(guān)閉的文字提示_布局與層

最新推薦

猜你喜歡

熱門推薦