非常流行的所謂的氣泡窗口_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
普通的Alt無法自定義風(fēng)格,而Sweet Titles通過JS腳本與CSS的集合.自定義了這種偽Alt風(fēng)格.
前一段時間非常流行的,就所謂的氣泡窗口(鼠標(biāo)移到鏈接處出現(xiàn)的).
我們這里實現(xiàn)的用的是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; /*氣泡框邊緣線粗細(xì),線的類型以及顏色.*/
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參數(shù)調(diào)整氣泡框的透明度.默認(rèn)為80..
this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";
前一段時間非常流行的,就所謂的氣泡窗口(鼠標(biāo)移到鏈接處出現(xiàn)的).
我們這里實現(xiàn)的用的是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; /*氣泡框邊緣線粗細(xì),線的類型以及顏色.*/
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參數(shù)調(diào)整氣泡框的透明度.默認(rèn)為80..
this.tip.style.opacity = '.80';
this.tip.style.filter = "alpha(opacity:80)";
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- HTML文本高級教程
- HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
- head區(qū)域的編碼規(guī)范
- HTML表格標(biāo)記教程(3):寬度和高度屬性WIDTH、HEIGHT
- HTML頁面中標(biāo)簽的語義與使用位置
- 入門:HTML的基本標(biāo)簽和屬性簡單介紹
- 常用的XHTML標(biāo)簽的使用技巧介紹
- HTML是WEB標(biāo)準(zhǔn)開發(fā)的中心基礎(chǔ)
- HTML表格標(biāo)記教程(14):表格的表頭
- 超鏈接圖標(biāo)規(guī)范:提升文章的可閱讀性
- 相關(guān)鏈接:
- 教程說明:
CSS教程-非常流行的所謂的氣泡窗口
。