放大镜特效

来源:互联网 发布:手机怎么淘宝实名认证 编辑:程序博客网 时间:2024/06/05 07:16
/*放大镜特效*/$(".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和leftvar _top=y-t-h;    var _left=x-l-w;       //能滑动的最大高度和宽度var bigW=$(".s_Img .shadow").width()-w*2;var bigH=$(".s_Img .shadow").height()-h*2if(_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});});

0 0