jquery实现图片放大功能
最近做的一个项目中需要图片放大的功能，所需要的jquery组件在百度云盘里边链接：http://pan.baidu.com/s/1dEKZQ29 密码：fyl8，也可以自己下载最新版的。
然后需要添加一个css文件，内容如下：
*{ margin:0; padding:0; list-style:none;}
#content{ width:500px; height:170px; margin:100px auto;}
#imgbox-loading {position: absolute;top: 0;left: 0; cursor: pointer;display: none;z-index: 90;}
#imgbox-loading div {background: #FFF;width: 100%;height : 100%;}
#imgbox-overlay {position: absolute;top: 0; left: 0;width: 100%;height: 100%;background: #000;display: none;z-index: 80;}
.imgbox-wrap {position: absolute;top: 0;left: 0;background: #FFF;display: none; z-index: 90;}
.imgbox-img {padding: 0;margin: 0;border: none;width: 100%; height: 100%;vertical-align: top;}
.imgbox-title { padding-top: 10px;font-size: 11px;text-align: center;font-family: Arial;color: #333;display: none;}
.imgbox-bg-wrap {position: absolute;padding: 0;margin: 0;display: none;}
.imgbox-bg {position: absolute;width: 20px; height: 20px;}主页面内容如下，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery点击图片放大效果</title>
<link href="assets/css/imagebox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- 代码 开始 -->
<div id="content">
<a id="example1" href="assets/images/4006876523_289a8296ee.jpg"><img src="assets/images/4006876523_289a8296ee_m.jpg" /></a>
<a id="example2" href="assets/images/3793633099_3e1e53e4ac_o.jpg"><img src="assets/images/3793633099_4f9c3e08b3_m.jpg" /></a>
</div>
<script src="js/jquery.min.js"></script>
<!-- <script src="js/jquery-1.11.3.min.js"></script> -->
<script src="js/jquery.imgbox.pack.js"></script>
<script>
$(function(){
alert("AAAAAAAA");
$("#example1").imgbox();
$("#example2").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>
<!-- 代码 结束 -->
</body>
</html>
但是，这个方法与我所想要的效果有一些不一样，这种效果只能显示一次，也就是说函数执行一次就不再执行了，而我的是在一个<c:forEach>循环中的，需要能够放大多张图片，查了一下资料，发现进行以下修改可以使用，
<script>
$(document).ready(function(){
// $(function(){
$("#example1").imgbox();
$('td a').imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>对应的代码为：
<td class="t-tr-td"><a id="example2" href="${item.imgUrl}"><img src="${item.imgUrl}" width="100" height="80"/></a></td>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理