jQuery弹出层插件推荐ColorBox使用攻略
的有关信息介绍如下:jQuery Colorbox是一款非常好的内容播放插件。它集弹出层、幻灯片播放功能于一身,不仅于此,它还支持其它的内容格式:例如html, flash, iframe等,这些内容的显示方式都是Ajax的。更难能可贵的是,在压缩后它只有10K的大小,使用这款插件不会给你的网页带来过多的负担,而且还能实现很棒的视觉效果,为用户体验增色不少。
易于使用也是Colorbox的众多优点之一,它的代码调用非常之简洁。
本经验分享如何使用jQuery Colorbox插件。
jquery.ColorBox确实是一个非常强大的jquery弹出层插件,仔细把ColorBox研究研究其他弹出层都不需要用了
在GitHub上下载最新版的jQuery Colorbox插件,如下图所示:
引入jquery和colorbox的js文件
引入colorbox的css文件
html代码如下:
ColorBox演示
弹性效果
调用colorbox的代码
$(document).ready(function(){
//元素调用Colorbox的示例
$(".group1").colorbox({ rel: 'group1' });
});
以上是如何使用的每一个步骤,这里是对上面4个步骤的整合后的完整示例。
最简单示例的完整代码,如下所示:
$(document).ready(function(){
//元素调用Colorbox的示例
$(".group1").colorbox({ rel: 'group1' });
});
ColorBox演示
弹性效果
案例运行效果如下图所示: