jquery实现图片放大点击切换

}
.xia .items ul li img:hover{
border:2px solid #FF6600;
padding:1px;
}
.zoom{
width: 350px;
height: 410px;
border:1px solid #ccc;
position: absolute;
top: 0;
right: -360px;
overflow: hidden;
display: none;
}

jquery代码

var $spic=$("#spic");
var $mask=$("#mask");
var $bigimg=$(".bigimg");
var $bpic=$("#bpic");
$(".items img").on("mouseover",function(){
 $spic.attr("src",$(this).attr("src"));//鼠标滑过切换
 $bpic.attr("src",$(this).attr("src"));
});
var l=$bigimg.eq(0).offset().left;
var t=$bigimg.eq(0).offset().top;
var width1=$mask.outerWidth()/2;
var height1=$mask.outerHeight()/2;
var maxl=$bigimg.width()-$mask.outerWidth();
var maxt=$bigimg.height()-$mask.outerHeight();
var bili=$bpic.width()/$spic.width();
$bigimg.mouseover(function(e){
 var maskl=e.clientX-l-width1,maskt=e.clientY-t-height1;
 if(maskl<0) maskl=0;
 if(maskt<0) maskt=0;
 if(maskl>maxl)maskl=maxl;
 if(maskt>maxt)maskt=maxt;
 $mask.css({"left":maskl,"top":maskt});
 $(".zoom").show();
 $bpic.css({"margin-left":-maskl*bili,"margin-top":-maskt*bili});
});
var marginLeft=0
$(".next").click(function(){
 marginLeft=marginLeft-63.5;
 if(marginLeft<-254) marginLeft=-254;
 $(".items ul").css({"margin-left":marginLeft})
})
$(".prev").click(function(){
 marginLeft=marginLeft+63;
 if(marginLeft>0) marginLeft=0;
 $(".items ul").css({"margin-left":marginLeft})
});