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

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