fancybox是jquery的插件,功能强大。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,除了能展示层外,还可以展示iframed内容, 通过CSS订制样式。配合其他插件,能实现更旋的效果。
下载以及实例地址:http://fancyapps.com/fancybox/
到目前为止,fancybox的最新版本2.1.2,调用方法变了一些,参数也加了一些。在上面那个地址的最下面,有非常详细的参数说明。下面简单说一下使用过程。
1,要用fancybox,至少要加载二个文件
- <script type="text/javascript" src1="jquery.fancybox.js?v=2.1.2"></script>
- <link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.2" media="screen" />
在这儿有一点让我不爽,就是要加载css文件,jquery插件当中要加载css文件的并不多。
2,html调用fancybox的地方
- 不知道从哪个版本开始,调用ajax的时候必须在class里面加上fancybox.ajax这个,调用iframe呢要加上fancybox.iframe。不然调不出来。前提是调用fancybox没有指定弹层类型的参数。指类型用type这个参数。
- 3,js调用fancybox
- $("#fancybox").fancybox({
- 'width' : '30%',
- 'height' : '20%',
- 'autoScale' : false,
- 'transitionIn' : 'none',
- 'transitionOut' : 'none',
- 'onClosed' : function() {alert('test');}
- });
- fancybox弹层插件有一点也要注意,就是不管是用ajax弹层,还是iframe来加载页面,弹出东西,要加上高和宽,如果不加的话,默认是自适应的。这样就会有问题,如果CSS用了特殊字体,即使你设置了,width和height,不同的浏览器计算出来的弹层大小会不一样。
- window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["weixin","tsina","qzone","tqq","renren"],"viewText":"分享到:","viewSize":"32"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","tsina","qzone","tqq","renren"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
来源: http://blog.51yip.com/jsjquery/1470.html