goodsDetail点击图片变大

标签：

运用JQuery点击图片变大

 goodsDetail.html中：

<link href="css/style.css" rel="stylesheet" />

<script type="text/javascript" src="js/script.js"></script>

显示图片：

<div id="tFocus">
	<div class="prev" id="prev"></div>
	<div class="next" id="next"></div>
	<ul id="tFocus-pic">
		<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:185px;width:330px;" /></a></li>
		<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:185px;width:330px;" /></a></li>
		<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:185px;width:330px;" /></a></li>
		<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:185px;width:330px;" /></a></li>
		<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:185px;width:330px;" /></a></li>
		</ul>
	<div id="tFocusBtn">
		<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>
		<div id="tFocus-btn">
			<ul>
				<li class="active"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style= "height:54px;width:57px;"/></li>
				<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:54px;width:57px;" /></li>
		        <li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:54px;width:57px;" /></li>
		        <li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:54px;width:57px;" /></li>
		        <li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:54px;width:57px;" /></li>
				
			</ul>
		</div>
		<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>
	</div>
</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script>

GoodsForm.java

private String pictureId1;
	private String pictureId2;
	private String pictureId3;
	private String pictureId4;
	private String pictureId5;
	private String pictureId6;

sql

commodity.picture1_id as pictureId1,
			commodity.picture2_id as pictureId2,
			commodity.picture3_id as pictureId3,
			commodity.picture4_id as pictureId4,
			commodity.picture5_id as pictureId5,

相应的数据库中添加图片。

goodsDetail点击图片变大

标签：

原文地址：http://my.oschina.net/u/2411776/blog/484801