昨天看一篇博文的时候，说到了这个效果，于是自己想试着写一个，没有使用插件，

基本的想法就是，左边是小图，右边对应大图，鼠标进去小图范围之后，获取他的坐标(x，y)然后计算

x/小图的宽度*大图得宽度/2

y/小图的高度*大图得高度/2

计算出来的两个结果即为大图得左右偏移距离

/2是为了让右边区域不会出现空白。

经过测试，ie7以上以及主流浏览器都可以用，代码如下：

div class=' wrap ' div class=' small ' img src=' http :1s。jpg ' div class=' tool ' id=' tool '/div/div class=' big ' img src=' http :1。jpg '/div/div。wrap { overflow 3360隐藏；余量：50px汽车；}.小{ position : relative float : left宽度宽度：214px高度：328 px} .工具{宽度：100像素高度：100 px位置：绝对；top:50pxleft:100px背景：rgba(255，255，255，0.5)；} .大{ float : leftmargin :0 40px宽度宽度：330像素飞越：隐藏；高度：328 pxdisplay:none位置：相对；}.大img { position:absolute宽度宽度：650像素高度：960 px}主要的射流研究…代码如下：

//不加蒙版放大镜$('.小')。鼠标移动(函数(e) { $(本)).兄弟姐妹('。大')。show()；//var e=事件| |窗口。事件；var scrollX=文档。文档元素。滚动| |文档。尸体。被偷窃；//滚动条距离屏幕左边的宽度var scrollY=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；//滚动条距离屏幕上面的高度//e.pageX相对于文档左边的高度//e.pageY相对于文档上面的高度//e.clientX相对于屏幕左边的高度//e.clientY相对于屏幕上面的高度var xx=e . PageX | | e . ClientX scrolLx；//相对于文档左边的宽度var YY=e . pagey | | e . clienty scrollY；//相对于文档上面的高度//.偏移量()。顶端元素相对于文档上面的位置//.偏移量()。左边的元素相对于文档左面的位置var y=yy-$(这个)。偏移量()。顶部；//鼠标相对于元素的x，y坐标var x=xx-$(这个)。偏移量()。向左；var width=$(this).宽度();var lwidth=$(this).兄弟姐妹('。大')。查找(' img ').宽度();//按照大图与小图的比例来进行移动的var left=x/width * lwidth/2；var height=$(this).高度();var LH三=$(这个).兄弟姐妹('。大')。查找(' img ').高度();var top=y/高度*左侧h8/2；$(这个)。兄弟姐妹('。大')。查找(' img ').css({left:-left，top :-top })；//控制台。日志(x '-' y)；//不加蒙版放大镜结束//蒙版跟着动var twidth=$(this).查找('。工具')。宽度();var theight=$(this).查找('。工具')。高度();var tleft=x-twi DTH/2；var ttop=y-theight/2；if(tle ft 0){ tle ft=0；} if(tleft width-twi DTH){ tleft=width-twi DTH；} if(ttop 0){ ttop=0 } if(ttophat-theight){ ttop=height-theight；} $(这个)。查找('。工具')。CSS({左：左，顶：顶})；});效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。