jquery+js实现鼠标位移放大镜效果

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的位置，然后用到鼠标适口位置等！

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