![](https://images2018.cnblogs.com/blog/1423308/201809/1423308-20180907083932147-2028537401.png)
<!doctype html <html lang="en"> <head> <meta charset="UTF-8"> <title>Reading glass</title> <script src="jquery10.min.js"></script> <style> .main_img{ height: 150px; 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;} .main_img:hover{} .main_img img{height: 100%; 100%;} .show_img{ height:400px; 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; } .show_img img{position: absolute;} .move_img{position: absolute; border: 1px solid #ccc; } .move_img div{opacity: 0.4; background-color: #ccc; 100%; height: 100%} </style> </head> <body> <div class = "main_img"> <img src="1.jpg" alt=""> <div class = 'move_img'> <div></div> </div> </div> <div class = "show_img"> <img src="1.jpg" alt=""> </div> </body> </html> <script> /* 功能: 图片放大镜功能 方法名: readingGlass 参数: obj -> 主图div对象 show_obj -> 显示div对象 move_obj -> 主图里面的移动div对象 */ function readingGlass(obj,show_obj,move_obj){ function move(e){ //鼠标的坐标 var mxx = e.clientX; var myy = e.clientY; //主图片左边与顶部距浏览器左边和顶部的距离 var ox = obj.offset().left; var oy = obj.offset().top; //鼠标在主主图片里的坐标 var dx = mxx - ox; var dy = myy - oy; //主图片框的内部的宽高 var ow = obj.width(); var oh = obj.height(); //移动比例 var ddx = -dx/ow; var ddy = -dy/oh; //显示容器的宽高 var w_show= show_obj.width(); var h_show= show_obj.height(); //显示图片的宽高 var w_show_img = show_obj.find("img").width(); var h_show_img = show_obj.find("img").height(); //小盒子的位置 smx = dx-(w_show/w_show_img )*ow/2; smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop(); //显示盒子中图片的位置 move_x = ddx*w_show_img+w_show/2; move_y = ddy*h_show_img+h_show/2; //小盒子位置越界与显示越界判定 if(smx<=0){ smx = 0; move_x = 0; }else if(smx>=(ow-(w_show/w_show_img )*ow)){ smx = ow-(w_show/w_show_img )*ow; move_x = -w_show_img+w_show; } if(smy<=0){ smy = 0; move_y = 0; }else if(smy>=(oh-(h_show/h_show_img )*oh)){ smy = oh-(h_show/h_show_img )*oh; move_y = -h_show_img+h_show; } //小盒子的宽高 move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh}); // 小盒子的位置设定 move_obj.animate({"left":smx,"top":smy},0); //显示盒子中图片的位置 show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0); } obj.mouseenter(function(){ $(document).bind('mousemove',move) move_obj.show(0); show_obj.show(400); return false; }).mouseleave(function(){ move_obj.hide(200); show_obj.hide(200); $(document).unbind('mousemove',move) return false; }) } readingGlass($(".main_img"),$(".show_img"),$(".move_img")); </script>
源码下载
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Reading glass</title><script src="jquery10.min.js"></script><style>.main_img{ height: 150px; 200px;overflow: hidden; border: 2px #ccc solid; /*opacity: 0.6;*/ position: relative; float: left;}.main_img:hover{}.main_img img{height: 100%; 100%;}.show_img{ height:400px; 400px;overflow: hidden; border: 2px #ccc solid;/* display: none;*/ position: relative; }.show_img img{position: absolute;}.move_img{position: absolute; border: 1px solid #ccc; }.move_img div{opacity: 0.4; background-color: #ccc; 100%; height: 100%}</style></head><body><div class = "main_img">
<img src="1.jpg" alt="">
<div class = 'move_img'><div></div></div>
</div>
<div class = "show_img"><img src="1.jpg" alt=""></div>
</body></html><script>/*功能:图片放大镜功能方法名:readingGlass参数:obj -> 主图div对象show_obj -> 显示div对象move_obj -> 主图里面的移动div对象*/
function readingGlass(obj,show_obj,move_obj){
function move(e){//鼠标的坐标var mxx = e.clientX;varmyy = e.clientY;
//主图片左边与顶部距浏览器左边和顶部的距离varox = obj.offset().left;var oy = obj.offset().top;
//鼠标在主主图片里的坐标var dx = mxx - ox;var dy = myy - oy;//主图片框的内部的宽高var ow = obj.width();var oh = obj.height();//移动比例var ddx = -dx/ow;var ddy = -dy/oh;//显示容器的宽高var w_show= show_obj.width();var h_show= show_obj.height();//显示图片的宽高var w_show_img = show_obj.find("img").width();var h_show_img = show_obj.find("img").height();
//小盒子的位置smx = dx-(w_show/w_show_img )*ow/2;smy = dy-(h_show/h_show_img )*oh/2+$(window).scrollTop();//显示盒子中图片的位置move_x = ddx*w_show_img+w_show/2;move_y = ddy*h_show_img+h_show/2;//小盒子位置越界与显示越界判定if(smx<=0){smx = 0;move_x = 0;}else if(smx>=(ow-(w_show/w_show_img )*ow)){smx = ow-(w_show/w_show_img )*ow;move_x = -w_show_img+w_show;}
if(smy<=0){smy = 0;move_y = 0;}else if(smy>=(oh-(h_show/h_show_img )*oh)){smy = oh-(h_show/h_show_img )*oh;move_y = -h_show_img+h_show;}
//小盒子的宽高move_obj.css({"width":(w_show/w_show_img )*ow,"height":(h_show/h_show_img )*oh});// 小盒子的位置设定move_obj.animate({"left":smx,"top":smy},0);
//显示盒子中图片的位置
show_obj.find("img").animate({"left":move_x+"px","top":move_y+"px"},0);
}
obj.mouseenter(function(){$(document).bind('mousemove',move)move_obj.show(0);show_obj.show(400);return false;
}).mouseleave(function(){move_obj.hide(200);show_obj.hide(200);$(document).unbind('mousemove',move)return false;
})}readingGlass($(".main_img"),$(".show_img"),$(".move_img"));
</script>