做项目时需要一个灯箱特效,网上一搜有很多相关插件,但是合适的非常少,有的需要在项目中加入大量代码,或者要大幅度改变HTML结构,最后发现了这一款小插件,名叫
jquery.fancybox,插件对代码结构要求比较简单,使用时只要引入一个jQuery库、插件核心代码和它提供的css样式与图片就能实现不错的特效,当然如果追求更高的美观性还可以仔细查阅它提供的API。
使用方法:
引入jQuery库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
引入插件代码
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
需要鼠标滚动切换下一张的话,引入:
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
引入css样式:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
基本的代码结构:
<a class='fancybox' data-fancybox-group='gallery' href='大图地址'><img src='小图地址'></a>
初始化代码:
$('.fancybox').fancybox();
这样基础的使用就完成了,如果要了解高级用法,请参考原作者提供的API和demo
官方介绍,
戳这里