<div id="box">
<div class="show">
<img src="images/necklace1.jpg" width="350" height="356" />
<span class="sShow"></span>
<span class="shade"></span>
</div>
<div class="btn">
<img src="images/necklace1.jpg" class="active" width="50" height="50" dataSrc="images/necklace1.jpg" />
<img src="images/necklace2.jpg" width="50" height="50" dataSrc="images/necklace2.jpg" />
<img src="images/necklace3.jpeg" width="50" height="50" dataSrc="images/necklace3.jpeg" />
<img src="images/necklace4.jpg" width="50" height="50" dataSrc="images/necklace4.jpg" />
<img src="images/necklace5.jpg" width="50" height="50" dataSrc="images/necklace5.jpg" />
</div>
<div class="bShow">
<img src="images/necklace1.jpg" />
</div>
</div>
<script type="text/javascript">
$("#box .shade").hover(function(){
$("#box .sShow,.bShow").show();
},function(){
$("#box .sShow,.bShow").hide();
});
$("#box .shade").mousemove(function(e){
var x=e.clientX;
var y=e.clientY;
var l=$(this).offset().left;
var t=$(this).offset().top;
var w=$("#box .sShow").width()/2;
var h=$("#box .sShow").height()/2;
var _left=x-l-w;
var _top=y-t-h;
var maxW=$("#box .shade").width()-w*2-2;
var maxH=$("#box .shade").height()-h*2-2;
if(_left<0){
_left=0;
}else if(_left>maxW){
_left=maxW;
}
if(_top<0){
_top=0;
}else if(_top>maxH){
_top=maxH;
}
$("#box span.sShow").css({"left":_left,"top":_top});
var wPro=_left/maxW;
var hPro=_top/maxH;
var BigLeft=wPro*($(".bShow img").width()-$(".bShow").width());
var BigTop=hPro*($(".bShow img").height()-$(".bShow").height());
$(".bShow img").css({"left":-BigLeft,"top":-BigTop});
});
$("#box .btn img").mousemove(function(){
$(this).addClass("active").siblings().removeClass("active");
var bSrc=$(this).attr("dataSrc");
$("#box .show img,#box .bShow img").attr("src",bSrc);
})
</script>