关于放大镜描述

对于放大镜，通俗易懂的是就是把图片进行放大，让其出现放大的动画，吸引人们的眼球

其效果为：

 

要想弄懂，必须要理解其原理

对于上图中的左边，阴影部位的部分对应其右边的部分，将其放大后的效果。

代码如下

$(function() {

$(".mask").hover(function() {
$(".float_layer").show()
$(".big_box").show()
}),
function() {
$(".float_layer").hide()
$(".big_box").hide()
}

注释：上面的意思为当鼠标移入和移出的效果

$(".mask").mousemove(function(e) {
var left = e.offsetX - 100;
var top = e.offsetY - 100;
var w = $(this).width();
var h = $(this).height();
if(top < 0)
top = 0;
if(left < 0)
left = 0;
if(e.offsetX + 100 >= w) {
left = w - 200;
}
if(e.offsetY + 100 >= h) {
top = h - 200;
}

$(".float_layer").css({
left: left + "px",
top: top + "px"
})
$(".big_box img").css({
left: -2 * left + "px",
top: -2 * top + "px"
})
})
})

上面图片的阴影部分移动时，在右边对应的效果图的方向相反，

比如，当阴影向右移动时，右边展示的图片向左移动才会有相应的效果。 

 

 

 

 

 

 上图：B1、B2为图片，A1为阴影部分，A2为放大镜放大后所显示的区域

其中A1移动时，B2也跟着移动，而且还是相反的方向移动，就时黑线，或者红色箭头的方向移动，

放大后是图片移动，不是那个div部分移动，黄色部分是不可见的部分。

 

标签：function,放大镜,top,关于,var,描述,移动,100,left
来源： https://www.cnblogs.com/weijun45683968/p/15530766.html