imagezoom用于放大查看商品图片,在凡客,京东,淘宝等商城商品详情页等都有图片放大镜效果
首先我们先放四张图片:
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"
/>
</a>
</div>
</li>
</ul>
接着我们对大图带有样式.jqzoom进行插件调用。当点击缩略图的时候,切换大图的图片。
$(function() {
$(".jqzoom").imagezoom();
$("#thumblist li a").click(function() {
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
});
});
请登录后发表评论
讨论这个工具(2)
666666666666666666666
666