/*放大镜特效*/
$(".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});
});
放大镜特效
最新推荐文章于 2021-02-03 15:16:45 发布