第一:html页面
<div class="jqzoom">
<img src="images/T1.png" jqImg="images/T1.png" id="bigImg" /><!--此处的jqImg是自己定义,用来显示大图的图片-->
</div>
<a class="thickbox" href="images/T1.png" ><span id="thickbox_span">此处查看清晰图片</span></a>
<div class="jqImages">
<img src="images/T1.png" />
<img src="images/T2.png" />
<img src="images/T3.png" />
</div>
点击下面3张小图,在上面的大图中能显示,而且可以使用放大镜
"此处查看清晰图片" 使用弹出层显示大图
第二:css文件
.jqzoom{
margin:40px;
clear: both;
margin-bottom:20px;
}
.jqzoom img{
width:300px;
height:350px;
margin:5px;
margin-bottom:0px;
padding-bottom:0px;
}
.jqImages{
width:360px;
height:160px;
border:1px solid #DDDDDD;
clear: both;
margin:10px;
margin-top:20px;
}
.jqImages img{
width:110px;
height:150px;
float: left;
margin:5px;
cursor: pointer;
}
#thickbox_span{
clear: both;
margin-left:130px;
}
第三:js文件
$(function(){
$(".jqzoom").jqueryzoom({
xzoom:400,
yzoom:400,
offset:10,
position:"right",
preload:1
});
});
$(function(){
//点击小图变大图
$(".jqImages img").click(function(){
var imgSrc=$(this).attr("src");
var i=imgSrc.lastIndexOf(".");//截取小数点以及后面的字符
var unit=imgSrc.substring(i);
imgSrc=imgSrc.substring(0,i);//截取小数点前面的字符
var imgSrc_jq=imgSrc+unit;
$("#bigImg").attr({"src":imgSrc_jq,"jqImg":imgSrc_jq});
$(".thickbox").attr("href",imgSrc_jq);
});
});
此处再引进jquery库以及
<script src="script/jquery.jqzoom.js" type="text/javascript"></script>
<script src="script/thickbox.js" type="text/javascript"></script>
大概的效果就实现了