非常流行的所謂的氣泡窗口

2024-07-11 08:23:43

字體：大中小

來源：轉載

供稿：網友

普通的Alt無法自定義風格,而Sweet Titles通過JS腳本與CSS的集合.自定義了這種偽Alt風格.
前一段時間非常流行的,就所謂的氣泡窗口(鼠標移到鏈接處出現的).

我們這里實現的用的是Sweet Titles的插件.顯示效果完全由CSS控制..

先下載Sweet Titles的插件（http://www.dustindiaz.com/sweet-titles）.
在頁面Body處插入如下:
<script type="text/javascript" src="/js/addEvent.js"></script> 
<script type="text/javascript" src="/js/sweetTitles.js"></script> 

然后在CSS文件里添加如下:
body div#toolTip { position:absolute;
z-index:1000;
width:220px; /*氣泡窗口最大寬度.*/
background:#000; /*氣泡窗口背景顏色.*/
border:2px double #fff; /*氣泡框邊緣線粗細,線的類型以及顏色.*/
text-align:left;
padding:5px;
min-height:2em;
-moz-border-radius:5px; /*FireFox專用,用來圓弧劃邊緣的四角.*/
}

body div#toolTip p {
margin:0;
padding:0;
color:#fff; /*說明文字顏色*/
font:11px/12px verdana,arial,sans-serif;
}

body div#toolTip p em {
display:block;
margin-top:3px;
color:#f60; /*地址文字顏色*/
font-style:normal;
font-weight:bold;
}

body div#toolTip p em span {
font-weight:bold;
color:#fff;
}

注:可以通過修改sweetTitles.js文件里的opacity參數調整氣泡框的透明度.默認為80..
this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";

上一篇：css里expression實現界面對象的批量控制

下一篇：用CSS制作Alpha濾鏡測試板