本文主要详细介绍js的简单放大镜效果，可以随意改变，放大区域的大小和比例。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享js实现简单放大镜效果的具体代码，供大家参考。具体内容如下
效果
效果：鼠标在原图中移动，小黄框随鼠标移动，小黄框覆盖的部分显示在显示区。
效果图如下：
核心思路
1.鼠标放在图片上，显示区出现，鼠标离开小方框，显示区消失。
2.鼠标在图片上移动时，小方框随着鼠标移动，鼠标在小黄方框的中间。
3.小框来判断，使其不能超出图片面积。
4.小方框在画面上移动多少，显示区域也要按同样的比例移动。
5.当显示区域的大小发生变化，或者显示区域的内容有所增减时，原图上的小黄框也随之变化。
操作
1.先把需要用到元素获取过来
//获取页面上我们需要的元素
var box 1=document . query selector(' . box 1 ')
var yellow=document . query selector('。黄色’)
var box 2=document . query selector(# right box)
var screen=rightbox.children[0]
2.鼠标放置到图片，显示区域出现，离开则消失
//鼠标进出图片
box1.onmouseenter=function(){
box2.style.display='block '
}
box 1 . onmousseleave=function(){
box2.style.display='none '
}
您可以通过使用鼠标的进入和退出事件来实现这一点。只需分别设置出席和缺席事件。
3.鼠标移动，小盒子跟随移动，且鼠标在黄色小盒子中间
box1.onmousemove=函数(e){
//计算小方框在图中时的中心点。
var x=e . pagex-box 1 . offset left-yellow . offset width/2
var y=e . pagey-box 1 . offset top-yellow . offset height/2
//给小黄框赋值，让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
}
1.使用事件，鼠标会触发图中的每个建筑，这样就可以随时刷新了。
2.当小盒子在图中时，计算它的中心点。
公式：(用鼠标在页面上的位置，减去图片的偏移距离，减去自身的一半)
在这里减去一半，以确保鼠标始终位于黄色框的中心。
4.小盒子给判断条件，让黄色小盒子不能超出图片区域
//将鼠标移动到图片上来触发事件
box1.onmousemove=函数(e){
//算出小方框在画面中央
var x=e . pagex-box 1 . offset left-yellow . offset width/2
var y=e . pagey-box 1 . offset top-yellow . offset height/2
//-
//新节
//确定小方框是否超出img范围，使黄色小方框不能超出img范围。
if(x0){
//此时的0不是图的左侧，而是小方框在最左侧时的中心点。
x=0
} else if(Xbox 1 . offsetwidth-yellow . offsetwidth){
//当小框的X轴中心点大于图片框的宽度减去自身宽度时，表示超出，始终等于图片框的宽度减去自身宽度。
x=box 1 . offsetwidth-yellow . offsetwidth
}
//同上
如果(y0){
y=0
} else if(ybox 1 . offset height-yellow . offset height){
y=box 1 . offset height-yellow . offset height
}
//-
//给小黄框赋值，让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
1.确定小方框左侧是否超出画面，此时给定的if(x0)为0，或者以中心点计算。
2.判断正确的Xbox 1 . offsetwidth-yellow . offsetwidth。
(是否大于图片区域的宽度减去小方框的宽度)
为什么是小盒子宽度，判定的是小盒子中心点，且0的位置是小盒子的中心点，已经减去过一半的小盒子，所以右边减去的就是小盒的一半*2
3.上下也一样，这个时候黄色小盒子就不会超出图片区域了
5.小盒在图片上移动多少，显示区域要移动同比例的距离
//通过计算，得出小盒子在图片移动多少，显示区就移动多少的比例
非常感谢。风格。left=-x/box 1。offsetwidth * src een。偏移量'像素'
非常感谢。风格。top=-y/box 1。偏移高度* src een。偏移高度'像素'
显示区域移动的多少，取决于小盒子移动多少
小盒子移动的值除以图片的宽度乘以显示区域的宽度
显示区域的移动值就可以和小盒子在图片的移动比例相同
6.显示区大小改变或显示区内容变化，图片上黄色盒子随之改变
//计算黄色小盒子在图片上的大小
黄色。风格。宽度=方框1。offsetwidth/(src een。偏移宽度/框2。offsetwidth)' px '
黄色。风格。高度=框1。偏移高度/(src een。偏移高度/框2。偏移高度)“像素”
}
计算方式为：黄色盒子的宽=图片的宽/(显示区域的内容宽度/显示区域的框的宽度)
高度也是一样的
因为，是鼠标移动触发，所以实时刷新
调整
。img2{
宽度：3000像素
高度：3000像素
位置：绝对；
}
#右框{
位置：绝对；
top:0；
左：650像素
宽度：900像素
高度：900像素
溢出：隐藏；
显示：无；
}
当需要调整框的大小，或放大比例时，改变这两个样式的宽高即可
内容，css，js整体代码
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
标题文档/标题
风格
*{
填充：0;
边距：0;
}。img1{
宽度：300像素
高度：300像素
}。img2{
宽度：3000像素
高度：3000像素
位置：绝对；
}
#右框{
位置：绝对；
top:0；
左：650像素
宽度：900像素
高度：900像素
溢出：隐藏；
显示：无；
}。黄色{
背景色：黄色；
不透明度：0.5;
宽度：100像素
高度：100像素
位置：绝对；
top:0；
左：0;
}。方框1{
宽度：300像素
高度：300像素
位置：相对；
左边距：300像素
}
/风格
/头
身体
div class='box1 '
img src=' ./images/1。jpg ' alt=' ' ' img 1 '
div class='yellow'/div
/div
div id='rightbox '
img src=' ./images/1。jpg ' alt=' ' class=' img 2 '
/div
脚本
//获取页面上我们需要的元素
变量框1=文档。查询选择器('。方框1’)
var yellow=文档。查询选择器(.黄色)
变量框2=文档。查询选择器(#右框)
var srceen=rightbox.children[0]
//鼠标进入和离开图片
box1.onmouseenter=function(){
box2.style.display='block '
}
方框1。onmousseleave=function(){
box2.style.display='none '
}
//鼠标在图片上移动触发事件
box1.onmousemove=函数(e){
//算出小盒子在图片的中心点
var x=e . pagex-box 1。向左偏移-黄色。偏移宽度/2
变量y=e .佩吉框1。偏移顶部-黄色。偏移高度/2
//判断小盒子是否超出img范围，使黄色小盒子不能超出img范围
if(x0){
//此时的0不是图片的左侧，而是小盒子在最左边时，小盒子的中心点
x=0
} else if(Xbox 1。偏黄色。offsetwidth){
//当小框的X轴中心点大于图片框的宽度减去自身宽度时，表示超出，始终等于图片框的宽度减去自身宽度。
x=box 1 . offsetwidth-yellow . offsetwidth
}
//同上
如果(y0){
y=0
} else if(ybox 1 . offset height-yellow . offset height){
y=box 1 . offset height-yellow . offset height
}
//给小黄框赋值，让小黄框跟着鼠标移动。
yellow.style.left=x 'px '
yellow.style.top=y 'px '
//通过计算，得到图片中小方框移动多少，显示区域移动多少的比例。
src een . style . left=-x/box 1 . offsetwidth * src een . offsetwidth ' px '
src een . style . top=-y/box 1 . offset height * src een . offset height ' px '
//计算图片上小黄框的大小
yellow . style . width=box 1 . offsetwidth/(src een . offsetwidth/box 2 . offsetwidth)' px '
yellow . style . height=box 1 . offset height/(src een . offset height/box 2 . offset height)' px '
}
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。