jquery实现图片放大功能

最新推荐文章于 2021-10-26 10:46:54 发布

黄小鱼ZZZ

最新推荐文章于 2021-10-26 10:46:54 发布

阅读量3.9k

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/wojiaohuangyu/article/details/52289578

版权

Java Web 专栏收录该内容

140 篇文章 2 订阅

订阅专栏

最近做的一个项目中需要图片放大的功能，所需要的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>

这样的话就解决了问题。

黄小鱼ZZZ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片放大功能

最近做的一个项目中需要图片放大的功能，所需要的jquery组件在百度云盘里边链接：http://pan.baidu.com/s/1dEKZQ29 密码：fyl8，也可以自己下载最新版的。然后需要添加一个css文件，内容如下： *{ margin:0; padding:0; list-style:none;}#content{ width:500px; height:170px; marg
复制链接

扫一扫

专栏目录