轉載請注明出處：http://www.uphtm.com/js/168.html
盡管FancyBox效果的外觀確實不錯，但是我們可能還是想用自己的顯示外觀進行一些修改。可以定制FancyBox外觀的各個不同部分，包括用來關閉FancyBox窗口或導航到前一張圖像或下一張圖像的按鈕；也可以修改覆蓋頁面的透明背景的顏色和透明度，或者改變圖片框和標題框的背景顏色。一些改變涉及給FancyBox函數提供不同的選項，而另一些改變則需要你直接對CSS文件做出修改。
FancyBox選項
FancyBox插件允許提供定制選項，以影響light box效果的外觀。基本上，我們給FancyBox函數傳遞一個對象直接量，其中包含了希望設置的選項的名字和想要為其設置的值。例如，要改變放置在頁面之上的背景的顏色和透明度，可以創建一個包含了新的設置的變量，並將其傳遞給FancyBox，如下所示：
- $（'#gallery a'）.fancybox（{
- overlayOpacity：.5，
- overlayColor：’#F64’，
- transitionIn：'elastic'，
- transitionOut：'elastic'
- }）；
在這個例子中，覆蓋層的顏色設置為鮮紅色（#F64），其透明度設置為50%（.5）。此外，transitionIn和transitionOut設置為elastic，這會影響到大圖像如何出現在屏幕上。在這個例子中，elastic設置使得單擊縮略圖的時候較大圖像出現在屏幕上，並且單擊Close按鈕（或者單擊頁面上的任何其他地方）的時候，圖像從屏幕上消失（通常，較大的圖像只是出現和消失，而沒有任何動畫效果）。
jQuery FancyBox接收很多不同的選項，這里只是介紹一些最有用的：
·overlayColor。在FancyBox顯示圖像的時候覆蓋頁面的背景顏色。這個選項接受一個十六進制的顏色值，例如#FF0033，如果沒有設置這個選項，插件將會使用灰色（#666）。像下面這樣設置這個選項：
- overlayColor：’#ff6346’
·overlayOpacity。覆蓋的透明度。這個選項設置了能夠通過覆蓋看到下面的頁面的數量。我們指定了0到1之間的一個數值：例如，.5就是50%的透明度。如果不希望能夠透過覆蓋看到內容，例如，希望在圖像顯示的時候，Web頁面的其他部分完全是黑色的，可以把這個選項設置為1。如果沒有設置這個選項，FancyBox會把透明度設置為30%（.3）。將這個值設置為0，則會隱藏覆蓋。
- overlayOpacity：.5
·Padding。圍繞着圖像的空間，它創建了圍繞着圖像的一個可見的邊框。通常，FancyBox將padding設置為10像素，但是，你可以將其更改為想要的任何值。0會完全去除彈出的圖像的邊框。直接提供一個數字（FancyBox假設這是像素值，因此，你不需要像通常在CSS中那樣加上px）：
- padding：5
·changeSpeed。當你在支持FancyBox的頁面中從一幅圖像移動到另一幅圖像的時候，包含圖像的邊框會進行動畫，它隨着當前圖像的尺寸而改變大小，以便與下一幅圖像相匹配。你可以通過設置這一選項來控制這種變化的速度。默認值是300，表示300毫秒，或者說是略短於半秒。例如：
- changeSpeed：500。
文章來源網頁編程http://www.uphtm.com 轉載請注明出處：http://www.uphtm.com/js/168.html