原生JS 实现类似淘宝京东商城图片展示 图片放大镜 效果

本次 JS实现 首先使用 原AJAX 请求数据 将请求的数据 加入到 数据样式中 实现动态 展示
data.json 数据格式为

[
{
"id": 1,
"imgs": [
"0.jpg",
"1.jpg",
"2.jpg"
]
},
{
"id": 2,
"imgs": [
"3.jpg",
"4.jpg",
"5.jpg"
]
},
{
"id": 3,
"imgs": [
"6.jpg",
"7.jpg",
"8.jpg"
]
}
]

上方是JSON 格式的数据 图片 0 3 6 为超小图 1 4 7 为中等图 2 5 8 为放大镜效果的图
首先 书写AJAX 请求代码

let Ajax = new XMLHttpRequest()
//创建 XML文本网络协议实例
Ajax.open('GET','./data.json',true)
//声明Ajax请求的方式 url路径 是否异步(true为异步)
Ajax.send()
//发送请求
Ajax.onreadystatechange = function (){
//对ajax准备状态改变的监听函数
if(Ajax.readyState === 4 &&  Ajax.status === 200){
//ajax准备状态为4 并且 状态值为200的时候 数据才会请求成功
}

打印接受到的数据

数据格式为字符串类型 需要使用JSON.parse 转变数据为对象类型
将数据复制给 arr 变量 对其使用froEach方法 对每个item进行循环 item.imgs里的路径赋给必要的方式
每次生成img 标签 img的src 对接ajax数据的第一个下表 item.imgs[0]

let img = document.createElement('img')  img.src = './img/' + item.imgs[0]

每个list下的图片添加点击事件 添加active样式
#img的div 下的图片路径对接下标为1的请求数据

$('#showImg').src = `./img/${arr[i].imgs[1]}`
$('#right').style['background-image'] = `url(./img/${arr[i].imgs[2]})`

最后将img 添加到 #list 下 效果如下

然后我们需要对右边的盒子的定位做出定义 它的位置受左边的盒子的宽长和margin 大小影响
放大图的盒子相对于网页的定位 top值与左边盒子相等
绝对定位left值是左边盒子的整个宽值加上左边盒子的相对于网页距离

let left = $('#left').offsetLeft + $('#left').offsetWidth
let top = $('#left').offsetTop
$('#right').style.left =  left
$('#right').style.top =  top

当鼠标放在左边盒子的img盒子里 右边的盒子才会显形 并且要按照鼠标按照图片的距离比例大小 扩大右图大小 从而展现出放大效果
这里就需要用到鼠标事件 onmouseenter 与 onmouseleave
在进出效果上 (mouseenter,mouseleave) 与(mouseout,mouseover) 是相等的

$('#img').onmouseenter = function (){
$('#right').style.display = 'block'
}
$("#img").onmouseleave = function(){
$("#right").style['display'] = 'none'
}

鼠标在对象里移动 就是 onmousemove()

$('#img').onmousemove = (e)=>{
let x = e.pageX - $('#left').offsetLeft;
let y = e.pageY - $('#left').offsetTop;
x = x / $('#showImg').offsetWidth  //获得百分比
y = y / $('#showImg').offsetHeight  //百分比
x = (x*100).toFixed(2) +'%'
y = (y*100).toFixed(2) +'%'
// console.log(x ,y)
$("#right").style.backgroundPositionX  = x;
$("#right").style.backgroundPositionY  = y;
}

一般情况 鼠标处还有个阴影方块 先设定下阴影css样式

#shadow {
width: 100px;
height: 100px;
background: rgb(85, 80, 80, 0.5);
/* border: 1xp solid #ccc; */
display: none;
position: absolute;
left: 0;
top: 0;
}

在js 代码中 写入

//计算阴影块出现的位置
let xx = e.pageX - $("#left").offsetLeft - ($('#shadow').offsetWidth / 2)
let yy = e.pageY - $("#left").offsetTop - ($('#shadow').offsetHeight / 2)
if (xx < 0) xx = 0;
if (yy < 0) yy = 0;
let maxLeft = $('#left').offsetWidth - $('#shadow').offsetWidth
let maxTop = $('#img').offsetHeight - $('#shadow').offsetHeight
if (xx > maxLeft) xx = maxLeft
if (yy > maxTop) yy = maxTop
$('#shadow').style.left = xx + 'px'
$('#shadow').style.top = yy + 'px'

效果如下

一个简单的放大镜就做好了