<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
代码
<a href="http://www.giftcenter.cn/giftcenterpictures/img640/02/102/02-102-015.jpg" id="jqzoomBox" class="jqzoom" title="图片预览">
<img src="http://www.giftcenter.cn/giftcenterpictures/img126/02/102/02-102-015.jpg" id="imgMedium" />
</a>
<img src="http://www.giftcenter.cn/giftcenterpictures/img126/02/102/02-102-015.jpg" id="imgMedium" />
</a>
代码
$(function() {
var options = {
zoomWidth: 400,
zoomHeight: 300,
xOffset: 30,
yOffset: -10,
position: "right"
};
$(".jqzoom").jqzoom(options);
});
var options = {
zoomWidth: 400,
zoomHeight: 300,
xOffset: 30,
yOffset: -10,
position: "right"
};
$(".jqzoom").jqzoom(options);
});
代码
$(function() {
$("#product-img ul li img").hover(function() {
var imgsrc = $(this).attr("src");
var imgmedium = imgsrc.replace("img80", "img126");
var imglarge = imgsrc.replace("img80", "img640");
$(this).parent().addClass("selected")
.siblings().removeClass("selected");
$("#imgMedium").attr({ "src": imgmedium });
$("a.jqzoom").attr({ "href": imglarge });
});
});
$("#product-img ul li img").hover(function() {
var imgsrc = $(this).attr("src");
var imgmedium = imgsrc.replace("img80", "img126");
var imglarge = imgsrc.replace("img80", "img640");
$(this).parent().addClass("selected")
.siblings().removeClass("selected");
$("#imgMedium").attr({ "src": imgmedium });
$("a.jqzoom").attr({ "href": imglarge });
});
});
$(this).parent() -- 获取当前元素的父元素。
$(this).parent().addClass("selected") –通过 addClass 和 removeClass 方法来实现效果的切换。
.siblings().removeClass("selected");
$(this).parent().addClass("selected") –通过 addClass 和 removeClass 方法来实现效果的切换。
.siblings().removeClass("selected");
代码
<div id="medium-img-box">
<a href="http://www.giftcenter.cn/giftcenterpictures/img640/02/102/02-102-015.jpg" id="jqzoomBox" class="jqzoom" title="图片预览">
<img src="http://www.giftcenter.cn/giftcenterpictures/img126/02/102/02-102-015.jpg" id="imgMedium" />
</a>
</div>
<div>
<ul>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-01.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-02.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-03.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-04.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-05.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-06.jpg" alt="" width="40" height="30" /></li>
</ul>
</div>
<a href="http://www.giftcenter.cn/giftcenterpictures/img640/02/102/02-102-015.jpg" id="jqzoomBox" class="jqzoom" title="图片预览">
<img src="http://www.giftcenter.cn/giftcenterpictures/img126/02/102/02-102-015.jpg" id="imgMedium" />
</a>
</div>
<div>
<ul>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-01.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-02.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-03.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-04.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-05.jpg" alt="" width="40" height="30" /></li>
<li>
<img src="http://www.giftcenter.cn/giftcenterpictures/img80/02/102/02-102-015-06.jpg" alt="" width="40" height="30" /></li>
</ul>
</div>
郑重声明：资讯 【电子商务网站产品详细页-实现产品图片放大镜效果（jQuery） - 基于ASP ...】由 发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权， 请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。
—— 相关资讯 ——
