首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery fancybox施用

2012-10-21 
Jquery fancybox应用今天接触了jquery的另一个插件 fancybox .一.使用方法:1.添加css文件:link relstyl

Jquery fancybox应用

今天接触了jquery的另一个插件 fancybox .

一.使用方法:

1.添加css文件:

<link rel="stylesheet" type="text/css" media="screen" href="'/**/jquery.fancybox-1.3.4.css"/>
2.添加js文件:

<script src="**/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/**/jquery.fancybox-1.3.4.pack.js" type="text/javascript" charset="utf-8"></script>

3.添加相关js代码:

<script>

?? $(document).ready({

????? $("a").fancybox();

?? });

</script>

4.添加html代码:

?padding跟CSS里的padding差不多一个意思imageScale如果为true,则图片会被缩放以适应窗口zoomOpacity如果为true,则在动画过程中内容的透明度会改变zoomSpeedInzooming-in动画时的速度,单位为毫秒。0的话动画将不会出现zoomSpeedOutzooming-out动画时的速度,单位为毫秒。0的话动画将不会出现zoomSpeedChange切换图片时的动画速度,单位为毫秒。值为0的话将不会出现动画easingIn, easingOut, easingChange决定动画使用何种easing效果frameWidthiframe和inline框口的默认宽度frameWidthiframe和inline框口的默认宽度frameHeightiframe和inline框口的默认高度overlayShow如果值为true的话,则显示遮罩,默认为false。遮罩的颜色可以在CSS里定义overlayOpacity遮罩的透明度。值为0到1.hideOnContentClick值为true的话,则在点击Fancybox对象时,Fancybox会被隐藏centerOnScroll值为true时,当用户滚动页面时,内容会一直居中显示itemArray可选项,可以设置自定义数组(事实上我还不知道用来干嘛的= =有空再研究下代码)callbackOnStart可选项,在Fancybox启动时会被调用callbackOnShow可选项,在Fancybox显示内容时会被调用callbackOnClose可选项,在Fancybox关闭时会被调用


???????
三.方法:

?$.fancybox.close() :关闭

?

四.学习网址:

http://fancybox.net/

?

五.功能:

弹出的窗口有很漂亮的阴影效果。 关联的对象(就是rel标签的值一样)会成组显示,上面还有导航的按钮(上一项,下一项)。 可以显示图片、内联、ajax和iframe内容。 可以通过设置参数和CSS定制效果。 通过easing插件可以实现fancy transitions效果(就是一些动画效果)。

?

热点排行