<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
* {margin: 0;padding: 0;}
.cxbZoom {width: 200px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}
.cxbZoom .mask {width: 75px;height: 75px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0;left: 0;cursor: move;display: none;}
.cxbZoom .small {position: relative;width:100%;height:100%}
.cxbZoom .small img{width:100%;}
.cxbZoom .box img {vertical-align: top;}
.cxbZoom .big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ff6600;overflow: hidden;display: none;}
.cxbZoom:hover .big { display:block; }
.cxbZoom .big img { position: relative;width:800px;z-index: 10999;top:0;left:0;}
</style>
</head>
<body>
<div class="cxbZoom" >
<div class="small">
<img src="http://img.mp.itc.cn/upload/20170511/2cc026a202ee4c9e8aa96fee1aaea903_th.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big"><img src="http://img.mp.itc.cn/upload/20170511/2cc026a202ee4c9e8aa96fee1aaea903_th.jpg" alt="" /></div>
<div id="pageY" style="width:200px;"></div>
</div>
<script>
var Zoom={
opt:{
smallBox: $(".cxbZoom .small"),
},
bind:function(){
var thisObj=this;
// this.opt.smallBox.hover(function(){
//// var _that=$(this);
//// _that.find(".mask").css("display","block");
//// _that.siblings(".big").css("display","block")
// },function(){
//// var _that=$(this);
//// _that.find(".mask").css("display","none");
//// _that.siblings(".big").css("display","none")
// });
this.opt.smallBox.mousemove(function(e) {
var _that=$(this),
box=_that.parent(".cxbZoom"),//大容器
mask=_that.find(".mask"),
bigBox=_that.siblings(".big "),
bigImg=bigBox.find(" img"),
event = e || window.event,
pageX = event.pageX || event.clientX + document.documentElement.scrollLeft,
pageY = event.pageY || event.clientY + document.documentElement.scrollTop,
targetX = pageX - box.offset().left,//移动的X距离
targetY = pageY - box.offset().top;//移动的Y距离
var maskX = targetX - mask.width() / 2;//遮罩方块X的距离
var maskY = targetY - mask.height() / 2;//遮罩方块Y的距离
if (maskX < 0) {maskX = 0;}if (maskX > _that.width() - mask.width() ) {maskX = _that.width() - mask.width() ;}//防止遮罩方块移出去
if (maskY < 0) {maskY = 0;}if (maskY > _that.height() - mask.height()) {maskY = _that.height() - mask.height();}
mask.css("left", maskX + "px");
mask.css("top",maskY + "px") ;
var bigToMove = bigImg.width() - bigBox.width() ;
var maskToMove = _that.width() - mask.width() ;
var rate = bigToMove / maskToMove;
$("#pageY").html("pageX:"+pageX+",pagY:"+pageY+",targetX:"+targetX+"<br/>"+"targetY:"+targetY+",maskX:"+maskX+",maskY:"+maskY+"<br/>"+"bigtoMOve:"+bigToMove+",maskTomove:"+maskToMove+",rate:"+rate)
bigImg.css({"left": -rate * maskX + "px","top":-rate * maskY + "px","height":bigImg.height()+"px"});
})
}
}
Zoom.bind();
</script>
</body></html>
