http://www.oschina.net/p/jquery+lightbox/

http://www.oschina.net/question/54100\_3890

Lightbox JS
是一个大概而又谦恭的用来把图片覆盖在最近页面上的脚本.就是一个页面上的弹出式对话框的组件,
它能被连忙安装还要运行于所有流行的浏览器.

而 JQuery Lightbox 是在 jQuery 框架的底蕴上贯彻版本。

jQuery LightBox 插件的使用方法和演示地址

鉴客 发表于 1-30 22:31 2年前,
2回/4001阅,
最后答应: 1年前 ( 0人收藏此话题, 我要收藏
|举报)

讨论区 »
技术分享

0

ligthBox是按照jquery开发的一个图片呈现特效,这么些插件实际行使的包仅仅7K够小了啊。关键在于使用的时候非凡简单,似乎你一贯就不
用修改你的另外代码包括Html。利用jquery的采用器,然后直接绑定lightBox方法就足以了。

体积小,使用简便,无侵入是lightbox的最大优点了。

下面是使用形式:

因为它是在jquery基础上付出的,所以您首先必须含有jquery包如下:

<script type=”text/javascript” src=”js/jquery.js”>

自然尤为急需包含lightBox文件了,这么些不要说

<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”>

引入lightBox的样式文件,这些文件在 lightBox下载压缩包中设有

<link rel=”stylesheet” type=”text/css”
href=”css/jquery.lightbox-0.5.css>

下边就是用jquery的选用器,拔取需要绑定lightBox方法的图形集合,然后绑定事件。

<script type="text/javascript">
$(function() {
    // 第一种选择
    $('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接
    // 第二种选择
    $('#gallery a').lightBox(); // 选择id为gallery下的所有链接
    // 第三种选择
    $('a.lightbox').lightBox(); // 选择所有class为lightbox的链接
    // 第四种选择
    $('a').lightBox(); // 选择页面中所有的链接
    //…………还有更多的选择,哈哈,发挥你的想象力吧
});
</script>

假如你是一步一步跟着做的话,现在你就可以看看效果了,是不是特玄,呵呵……当然即使您不精晓jquery的采用器怎么用,那么确实是一个难为问题。学习
一下jquery吧,确实很好用的。

相关文章

网站地图xml地图