jQuery实现仿某东商品详情页放大镜效果

---

  用jquery+js实现放大镜效果，效果大概如下图！

---

          效果是不是大家很感兴趣，放大镜查看细节，下边大家可以详细看一看具体是怎么实现的。下边直接看代码！

HTML部分排版

          代码就不上了，大概思路就是左右两个DIV，一个用来显示正常显示的页面，一个用来显示放大图片！

js+jquery实现效果代码如下：

 var $magPic=$("#magPic");

 var $magRic=$("#magRic");

 var $mag=$(".mag");

 var $boxT=$(".boxT");

 $(".ul1 li").mouseenter(function(){

 //attr()添加属性

   $magPic.attr("src",$(this).find("img").attr("src"));

   $magRic.attr("src",$(this).find("img").attr("src"));

 });

鼠标点击实现下边图片传到上边图片效果；

 //鼠标点击左右两侧发生改变

 var marginLeft=0;

 $(".boxB .span2").on("click",function(){

   marginLeft=marginLeft-63;

   if(marginLeft<-252) marginLeft=-252;

     $(".boxB .ul1").css({"margin-left":marginLeft});

 })

 $(".boxB .span1").on("click",function(){

   marginLeft=marginLeft+63

   if(marginLeft>0) marginLeft=0;

     $(".boxB .ul1").css({"margin-left":marginLeft});

})

//放大镜效果

//offset()获取匹配元素在当前视口的相对偏移。，配合LEFT，与TOP使用、

//client获取适口的位置！

//outerWidth元素的宽度包含padding()和border()

var L=$boxT.eq(0).offset().left;

var T=$boxT.eq(0).offset().top;

var mag_width=$mag.outerWidth()/2;

var mag_height=$mag.outerHeight()/2;

var maxL=$boxT.width()-$mag.outerWidth();

var maxT=$boxT.height()-$mag.outerHeight();

var bili=$magRic.width()/$magPic.width();

$boxT.mousemove(function(e){

  //document.title=e.clientX+","+e.clientY;

  var magL=e.clientX-L-mag_width,magT=e.clientY-T-mag_height;

  //行内判断可以用if这种语句、

  if(magL<0)magL=0;

  if(magT<0)magT=0;

  if(magL>maxL)magL=maxL;

  if(magT>maxT)magT=maxT;

  $mag.css({"left":magL,"top":magT});

  /*$(".Bright").show();

  $(".mag").show();*/

  //可修改为(合并选择器一起返回)

  $(".Bright,.mag").show()

  //右边显示层效果

  $magRic.css({"margin-left":-magL*bili,"margin-top":-magT*bili})

});

$boxT.mouseleave(function(){

  $(".Bright").hide();

  $(".mag").hide();

  $(".Bright,.mag").hide()

})

这里需要计算css的位置，然后用到鼠标适口位置等！

大概就是这样大家可以去试试！