DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 非常流行的所謂的氣泡窗口
非常流行的所謂的氣泡窗口
編輯:CSS詳解     
普通的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)";
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved