资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jqueryFancybox插件的应用

Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本、flash动画、iframe以及ajax也予以支持。还可以通过css自定义外观,阴影效果超级赞!

创新互联专业为企业提供安康网站建设、安康做网站、安康网站设计、安康网站制作等企业网站建设、网页设计与制作、安康企业网站模板建站服务,10多年安康做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

演示效果:http://www.phpddt.com/demo/fancyBox/demo/index.html
使用教程也是相当简单:

首先当然是要引入jquery核心库和Fancybox插件库:

如果你要实现图片滚轮效果,引入下面文件:

FancyBox核心js和css文件:

如果你需要按钮效果,引入按钮css文件:

如果你要实现缩略图效果,引入:

如果要动态加载媒体,引入:

下面是一个最简单的图片展示例子:


  1. fancyBox使用教程 -  PHP点点通(www.phpddt.com)

  2. $(document).ready(function(){

  3. $('.fancybox').fancybox();

  4. $(".fancybox-effects-a").fancybox({

  5. helpers:{

  6. title:{

  7. type:'outside'

  8. },

  9. overlay:{

  10. speedOut:0

  11. }

  12. }

  13. });

  14. });

  15. .fancybox-custom.fancybox-skin{

  16. box-shadow:0050px#222;

  17. }

  18. body{

  19. max-width:700px;

  20. margin:0auto;

  21. }

  22. 对简单图片展示


效果如如下:

jquery Fancybox插件的应用

更多FancyBox参数及选项配置如下:

jquery Fancybox插件的应用

下载:fancyBox-master.zip  (点击这里演示)


文章标题:jqueryFancybox插件的应用
分享链接:http://www.cdkjz.cn/article/ppojji.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220