放大镜特效

/*放大镜特效*/
$(".q_Img img").mouseover(function(){
    //鼠标滑动切换底部小图片    
	$(this).addClass("active").siblings().removeClass("active");
    //切换上部小图片
    var sImg=$(this).attr("dataSrc");
	$(".s_Img img").attr("src",sImg);
	$(".b_Img img").attr("src",sImg);
});

/*移到透明层上显示效果*/
$(".s_Img .shadow").hover(function(){
    $(".s_Img span.fk,.b_Img").show()

},function(){
    $(".s_Img span.fk,.b_Img").hide()
});

/*在透明层上移动效果*/
$(".s_Img .shadow").mousemove(function(e){
    //获取鼠标的位置
	var x=e.clientX;
    var y=e.clientY;
	

	//获取图片与屏幕左边和上边与屏幕的距离
	var t=$(this).offset().top-$(document).scrollTop();;
	var l=$(this).offset().left;
    /*document.title=t+"--"+l;*/
	//获取小方块的宽度和高度的一半
	var w=$(".s_Img span.fk").width()/2;
    var h=$(".s_Img span.fk").height()/2;

	//计算得到小方块与图片的top和left
	var _top=y-t-h;
    var _left=x-l-w;
   
    
	//能滑动的最大高度和宽度
	var bigW=$(".s_Img .shadow").width()-w*2;
	var bigH=$(".s_Img .shadow").height()-h*2


	if(_top<0){
	    _top=0;
	}
	else if(_top>bigH){
	    _top=bigH;
	}
	
	if(_left<0){
	    _left=0;
	}
	else if(_left>bigW){
	    _left=bigW;
	}
	
	//通过改变css动态改变小方块与图片的绝对位置
	$(".s_Img span.fk").css({"left":_left,"top":_top});
	
    //获取图片的移动比例
    var _l=_left/bigW;
	var _h=_top/bigH;
    
	//大图移动的距离
    var _bigL=($(".b_Img img").width()-$(".b_Img").width())*_l;
	var _bigT=($(".b_Img img").height()-$(".b_Img").height())*_h;
     
	/*document.title=_bigL+"--"+_bigT;*/
	
	//动态改变大图的绝对位置
	$(".b_Img img").css({"left":-_bigL,"top":-_bigT});
});