Javascript 如何在悬停时创建多个单独的放大效果

如图所示，有很大的放大效果

$（文档）.ready（函数（）{
var native_width=0；
var native_height=0；
$（“.large”）.css（“背景”，“url”（“+$（.small”）.attr（“src”）+”）无重复）；
$（“.放大”）.mousemove（函数（e）{
如果（！本机_宽度&&！本机_高度）{
var image_object=新图像（）；
image_object.src=$（“.small”）.attr（“src”）；
本机\u宽度=图像\u对象.width；
本机高度=图像高度=对象高度；
}否则{
var放大_offset=$（this.offset（）；
var mx=e.pageX-放大偏移量。左；
var my=e.pageY-放大偏移量.top；
如果（mx<$（此）.width（）&&my<$（此）.height（）&&mx>0&&my>0）{
$（“.large”）.fadeIn（100）；
}否则{
美元（“.large”）。淡出（100）；
}
如果（$（“.large”）.是（“：可见”））{
var rx=Math.round（mx/$（“.small”）.width（）*本机宽度-$（“.large”）.width（）/2）*-1；
var ry=Math.round（my/$（“.small”）.height（）*原生高度-$（“.large”）.height（）/2）*-1；
var bgp=rx+“px”+ry+“px”；
var px=mx-$（“.large”）.width（）/2；
var py=my-$（“.large”）.height（）/2；
$（“.large”）.css({
左：px，
顶部：py，
背景资料：bgp
});
}
}
})
})

*{
保证金：0；
填充：0；
}
.放大{
宽度：200px；
保证金：50px自动；
位置：相对位置；
光标：无
}
.大{
宽度：175px；
高度：175px；
位置：绝对位置；
边界半径：100%；
框阴影：0 0 0 7px rgba（255，255，255，0.85），0 0 7px 7px rgba（0，0，0，0.25），插入0 0 0 40px 2px rgba（0，0，0，0.25）；
显示：无；
}
.小{
显示：块；
}

---

要解决此问题，您需要引用每个

中的
.small
和
.large
元素。放大
实例，而不是同时在DOM中检索它们

为此，您可以使用
$（this）.find（）
在
上的
mousemove
事件中。放大
元素，如下所示：


$（文档）.ready（函数（）{
var native_width=0；
var native_height=0；
$（“.large”）.css（“背景”，函数（）{
返回“url（''''+$（this）.next（.small”）.attr（“src”）+“'）无重复”
});
$（“.放大”）.mousemove（函数（e）{
//在此处检索相关元素：
变量$this=$（this），
$small=$this.find（'.small'），
$large=$this.find（'.large'）；
//…并在以下代码块中使用它们：
如果（！本机_宽度&&！本机_高度）{
var image_object=新图像（）；
image_object.src=$small.attr（“src”）；
本机\u宽度=图像\u对象.width；
本机高度=图像高度=对象高度；
}否则{
var放大_offset=$this.offset（）；
var mx=e.pageX-放大偏移量。左；
var my=e.pageY-放大偏移量.top；
如果（mx<$this.width（）&&my<$this.height（）&&mx>0&&my>0）{
$large.fadeIn（100）；
}否则{
$large.fadeOut（100）；
}
如果（$large.is（“：visible”））{
var rx=Math.round（mx/$small.width（）*本机宽度-$（“.large”）.width（）/2）*-1；
var ry=Math.round（my/$small.height（）*原生高度-$（“.large”）.height（）/2）*-1；
var bgp=rx+“px”+ry+“px”；
var px=mx-$large.width（）/2；
var py=my-$large.height（）/2；
$large.css({
左：px，
顶部：py，
背景资料：bgp
});
}
}
})
})
*{
保证金：0；
填充：0；
}
.放大{
宽度：200px；
保证金：50px自动；
位置：相对位置；
光标：无
}
.大{
宽度：175px；
高度：175px；
位置：绝对位置；
边界半径：100%；
框阴影：0 0 0 7px rgba（255，255，255，0.85），0 0 7px 7px rgba（0，0，0，0.25），插入0 0 0 40px 2px rgba（0，0，0，0.25）；
显示：无；
z索引：10；/*添加此项可停止放大镜的裁剪*/
}
.小{
显示：块；
}
我很喜欢你提到的代码笔。使用背景位置和图像的额外副本（全分辨率）来模拟放大镜是个好主意。很酷！