会员登录注册入口
帐  号:
密  码:
  保持登录 忘记密码?
主页 > 特效插件 > 交互特效 >

jquery.fancybox-简单易用的灯箱特效jquery插件

2016-01-02   适用版本:未知  所属类目:交互特效
价格:¥0  人气:108

做项目时需要一个灯箱特效,网上一搜有很多相关插件,但是合适的非常少,有的需要在项目中加入大量代码,或者要大幅度改变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
官方介绍,戳这里
去淘宝购买

相关插件

登录 后才能参加讨论~