非常流行的所謂的氣泡窗口
2024-07-11 08:24: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> <!--填入正確的js文件地址-->
<script type="text/javascript" src="/js/sweetTitles.js"></script> <!--填入正確的js文件地址-->
然后在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)";
