jQuery图片点击放大特效

一款jQuery图片点击放大特效，上面两张的效果相同，都是点击小图后逐渐变大显示大图，下面两张则是快速放大切换到大图显示。

分类：图片代码 > 图片相册难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/css.css" />

页面的body部分，需在div容器里放入多个图片链接，代码如下：

<div id="content">
	<a class="example1" href="images/d2.jpg"><img src="images/x2.jpg" /></a>
    <a class="example1" href="images/d1.jpg"><img src="images/x1.jpg" /></a>
    <br /><br />
	<a class="example2" href="images/d3.jpg"><img src="images/x3.jpg" /></a>
    <a class="example2" href="images/d4.jpg"><img src="images/x4.jpg" /></a>
</div>

页面的底部，需引入两个必要的js文件，并对指定元素启用图片放大特效，代码如下：

<script type="text/javascript" src="js/jqueryLibrary.min.js"></script>
<script type="text/javascript" src="js/jquery.imgbox.pack.js"></script>
<script type="text/javascript">
$(function(){
	$(".example1").imgbox();
	$(".example2").imgbox({
		'speedIn'		: 0,
		'speedOut'		: 0,
		'alignment'		: 'center',
		'overlayShow'	: true,
		'allowMultiple'	: false
	});
});
</script>