FancyBox插件详细使⽤⽅法-定制⾃⼰的FancyBox（1）
尽管FancyBox效果的外观确实不错，但是我们可能还是想⽤⾃⼰的显⽰外观进⾏⼀些修改。可以定制FancyBox外观的各个不同部分，包括⽤来关闭FancyBox窗⼝或导航到前⼀张图像或下⼀张图像的按钮；也可以修改覆盖页⾯的透明背景的颜⾊和透明度，或者改变图⽚框和标题框的背景颜⾊。⼀些改变涉及给FancyBox函数提供不同的选项，⽽另⼀些改变则需要你直接对CSS⽂件做出修改。
FancyBox选项
FancyBox插件允许提供定制选项，以影响light box效果的外观。基本上，我们给FancyBox函数传递⼀个对象直接量，其中包含了希望设置的选项的名字和想要为其设置的值。例如，要改变放置在页⾯之上的背景的颜⾊和透明度，可以创建⼀个包含了新的设置的变量，并将其传递给FancyBox，如下所⽰：
1. $（'#gallery a'）.fancybox（{
2. overlayOpacity：.5，
3. overlayColor：’#F64’，
4. transitionIn：'elastic'，
box shadow怎么设置
5. transitionOut：'elastic'
6. }）；
在这个例⼦中，覆盖层的颜⾊设置为鲜红⾊（#F64），其透明度设置为50%（.5）。此外，transitionIn和transitionOut设置为elastic，这会影响到⼤图像如何出现在屏幕上。在这个例⼦中，elastic设置使得单击缩略图的时候较⼤图像出现在屏幕上，并且单击Close按钮（或者单击页⾯上的任何其他地⽅）的时候，图像从屏幕上消失（通常，较⼤的图像只是出现和消失，⽽没有任何动画效果）。
jQuery FancyBox接收很多不同的选项，这⾥只是介绍⼀些最有⽤的：
·overlayColor。在FancyBox显⽰图像的时候覆盖页⾯的背景颜⾊。这个选项接受⼀个⼗六进制的颜⾊值，例如#FF0033，如果没有设置这个选项，插件将会使⽤灰⾊（#666）。像下⾯这样设置这个选项：
1. overlayColor：’#ff6346’
·overlayOpacity。覆盖的透明度。这个选项设置了能够通过覆盖看到下⾯的页⾯的数量。我们指定了0到1之间的⼀个数值：例如，.5就是50%的透明度。如果不希望能够透过覆盖看到内容，例如，希望在
图像显⽰的时候，Web页⾯的其他部分完全是⿊⾊的，可以把这个选项设置为1。如果没有设置这个选项，FancyBox会把透明度设置为30%（.3）。将这个值设置为0，则会隐藏覆盖。
1. overlayOpacity：.5
·Padding。围绕着图像的空间，它创建了围绕着图像的⼀个可见的边框。通常，FancyBox将padding设置为10像素，但是，你可以将其更改为想要的任何值。0会完全去除弹出的图像的边框。直接提供⼀个数字（FancyBox假设这是像素值，因此，你不需要像通常在CSS中那样加上px）：
1. padding：5
·changeSpeed。当你在⽀持FancyBox的页⾯中从⼀幅图像移动到另⼀幅图像的时候，包含图像的边框会进⾏动画，它随着当前图像的尺⼨⽽改变⼤⼩，以便与下⼀幅图像相匹配。你可以通过设置这⼀选项来控制这种变化的速度。默认值是300，表⽰300毫秒，或者说是略短于半秒。例如：
1. changeSpeed：500。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。